php - 如何使用 jQuery 查找具有特定类名的每个下一个元素？

Question

我的网页中有一个 html 结构如下:

<div class="group_name">Group A</div>
<div class="student_name">Studen 1</div>
<div class="student_name">Studen 2</div>
<div class="student_name">Studen 3</div>

<div class="group_name">Group B</div>
<div class="student_name">Studen 1</div>
<div class="student_name">Studen 2</div>
<div class="student_name">Studen 3</div>

..
.
.

现在这个结构是使用 PHP 动态生成的。我想要做的是，我想添加以下代码作为“A 组”的最后一个元素:

<div class="student_name">Studen 4</div>

但我想使用 jQuery 添加它，因为我将这条“Student 4”记录作为 Ajax 响应字符串。所以 div 是根据组名添加的。目前，我已将组名称的静态值用作“Group A”。所以 Javascript 会像下面这样:

$(".group_name").each(function(index){
    var group_name = $(this).text();

    if(group_name=='Group A'){
          // Add Student 4 to last position of this group
    }
});

这样我就已经选择了“Group A”元素。但现在我想添加“Student 4”作为该组中的最后一个条目(在“Student 3”下方)。我该怎么做？

提前致谢。

Answer 1

$('.group_name').filter(function() {
    return $(this).text() == 'Group A';
}).nextUntil('.group_name').filter('.student_name').last().after('<div class="student_name">Student X</div>');

这段代码的作用:

• $('.group_name') 选择所有组
• .filter(...) 将其缩减为具有正确组名的元素。我没有使用 :contains()，因为那样会执行子字符串匹配而不是完全匹配。
• .nextUntil('.group_name') 接受所有不是新组的后续兄弟
• .filter('.student_name') 删除所有不是学生元素的元素 - 以防万一您的 DOM 结构糟糕到需要这样做
• .last() 将其减少到最后一个 - 新的应该插入的位置
• .after(...) 在该元素之后插入新条目。

这是一个演示:http://jsfiddle.net/ThiefMaster/5UHgC/

---

请注意，通过像这样更改您的结构，您可以使这更容易、更清晰和更有条理:

<div class="group" id="group-1">
    <div class="group_name">...</div>
    <div class="students">
        <div class="student_name"></div>
        <div class="student_name"></div>
        <div class="student_name"></div>
    </div>
</div>

<div class="group" id="group-2">
    <div class="group_name">...</div>
    <div class="students">
        <div class="student_name"></div>
        <div class="student_name"></div>
        <div class="student_name"></div>
    </div>
</div>

然后你可以简单地使用这个:

$('#group-X .students').append('<div class="student_name"></div>');