jQuery Child Selector по классу

Question

У меня есть следующая структура html, и я хотел бы вставить div с помощью jQuery в указанное место.

<div class="item" data-url-id="intro"> 
    <div class="title-wrapper">  
     ... 
    </div> 
    <!-- want to insert the element here --> 
    <div class="content-wrapper"> 
     ... 
    </div> 
</div> 

Я использую этот код:

$("div[class='item'][data-url-id='intro'] > div[class='title-wrapper']").after("<div class='...'>...</div>"); 

По существу, 'внутри' div «s не имеют идентификаторы, и должны быть определены константы выглядит классом.

Я думал, что выше, означает, «вставить элемент после div класса„название-обертка“, которая является дочерним элементом div с„пунктом“класса и атрибутом„данными для URL-идентификатор“Кто значение 'intro' '.

Любые мысли очень ценятся!

С уважением,

Зефир

Answer 1

The Jquery селекторы могут быть упрощены немного:

$('.item[data-url-id=intro] > .title-wrapper').after('<div>Inserted Element</div>');

Вот рабочий jsfiddle: http://jsfiddle.net/2ys5j0ac/

Answer 2

использование после функции правильно, но вам не нужно указывать так много селекторов. Также вы можете использовать точку «.». оператор как селектор классов. для вашего случая это может быть:

$(".title-wrapper").after("<div class='...'>...</div>"); 

однако, если вы ожидаете, что другой DIV с классом титульной оберткой где не хочет иметь ДИВ вставлено вы можете записать его в виде.

$(".item > .title-wrapper").after("<div class='...'>...</div>"); 

Answer 3

Если title-wrapper является единственным ДИВ с этим классом, можно попробовать такой код:

$(".title-wrapper").after("<div>new div</div>"); 

или вы можете попробовать это: