[英]How to find each next element with specific class name using jQuery?
我的网页中有一个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动态生成的。 我想做的是,我想添加以下代码作为“ Group 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
}
});
这样,我已经选择了“ 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(...)
将其.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>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.