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

How to find each next element with specific class name using jQuery?

本文关键字：元素 下一个 jQuery 何使用 查找      更新时间：2023-09-26

我的网页中有一个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 添加它，因为我将这个"学生 4"记录作为 Ajax 响应字符串。因此，将根据组名称添加div。目前，我将组名称的静态值用作"组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
    }
});

所以这样我已经选择了"A组"元素。但是现在我想添加"学生 4"作为该组中的最后一个条目（在"学生 3"下方）。我该怎么做？

提前谢谢。

$('.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>');
相关文章：