[英]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.