jquery - 按类分类的 jQuery 子选择器

Question

我有以下 html 结构，并想div在指定位置插入一个 using 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没有 id，因此必须由类标识。

我认为上面的意思是“在一个类'title-wrapper'之后插入一个元素，div它是一个div类'item'的子元素和一个'data-url-id'的属性，其值为'intro'”。

任何想法都非常感谢！

问候，

和风

Answer 1

jquery 选择器可以稍微简化一下：

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

这是一个有效的 jsfiddle：http: //jsfiddle.net/2ys5j0ac/

Answer 2

after 函数的使用是正确的，但是你不需要指定这么多的选择器。您也可以使用点“。” 运算符作为类选择器。对于您的情况，它可以是：

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

但是，如果您希望另一个具有类title-wrapper的 div 不想插入 div，您可以将其编写为。

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

Answer 3

如果title-wrapper是此类的唯一 div，您可以尝试以下代码：

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

或者你可以试试这个：

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