![](/img/trans.png)
[英]How can I select elements that don't have any of several classes using jQuery?
[英]jQuery: Select Iterated elements with class A-i and B-i only when all A-i also have B-i, or don't select any at all
下面的代碼有三行 div。
使用 jQuery,我將如何在每一行中搜索 A-# 和 B-#,僅對具有匹配元素的行中的 div 進行更改(在這種情況下,只有第 2 行 div)。
.A-0 { width: 33.33%; height: 49px; }.A-1 { width: 50%; height: 49px; }.A-2 { width: 33.33%; height: 49px; }
/* row 1 */ <div class="A-0 B-0"></div> <div class="A-0"></div> <div class="A-0 B-0"></div> /* row 2 */ <div class="A-1 B-1"></div> <div class="A-1 B-1"></div> /* row 3 */ <div class="A-2"></div> <div class="A-2 B-2"></div> <div class="A-2 B-2"></div>
$('div').each(function(index, value) { //for each div var classes = $(this).attr("class").split(/\s+/); //extract classes for curent var class1 = classes[0]; //class1 = A-# var class2 = classes[1]; //class2 = B-# var numeEl = $('div.' + class1).length; //Number off elements with class1 A-# var numeEl2 = $('div.' + class1 + '.' + class2).length; //Number off elements with class1 A-# AND class2 B-# $('div.' + class1).each(function(index, value) { //for each element div with class: A-# if (numeEl === numeEl2) { //if number of elements is matching $(this).css("color", "red") //do something } }); });
.A-0 { width: 33.33%; }.A-1 { width: 50%; }.A-2 { width: 33.33%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br> <div class="A-0 B-0">A-0 B-0</div> <div class="A-0">A-0</div> <div class="A-0 B-0">A-0 B-0</div> <br> <div class="A-1 B-1">A-1 B-1</div> <div class="A-1 B-1">A-1 B-1</div> <br> <div class="A-2">A-2</div> <div class="A-2 B-2">A-2 B-2</div> <div class="A-2 B-2">A-2 B-2</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.