jquery innerhtml




كيف يمكنني تحديد عنصر ذي صفوف متعددة في jQuery؟ (7)

أرغب في اختيار جميع العناصر التي تحتوي على فئتين ( a و ( b .

<element class="a b">

لذلك ، فقط العناصر التي تحتوي على كل الطبقات.

عندما أستخدم $(".a, .b") يعطيني الاتحاد ، لكنني أرغب في التقاطع.


إذا كنت تريد تقاطع ، فاكتب فقط المحددات بدون فراغات بينهما.

$('.a.b')

لذلك ، بالنسبة إلى عنصر يحتوي على معرف للصفتين b و c ، يمكنك كتابة:

$('#a.b.c')

المشكلة التي تواجهها ، هي أنك تستخدم Group Selector ، بينما يجب أن تستخدم Multiples selector ! لكي تكون أكثر تحديدًا ، فأنت تستخدم $('.a, .b') بينما يجب أن تستخدم $('.a.b') .

لمزيد من المعلومات ، راجع نظرة عامة على الطرق المختلفة لدمج محددات هنا!

Group Selector: "،"

حدد جميع عناصر <h1> وجميع عناصر <p> وجميع عناصر <a> :

$('h1, p, a')

محدد التعدد: "" (بلا شخصية)

حدد جميع عناصر <input> من text type ، مع code الفئات red :

$('input[type="text"].code.red')

محدد السليل: "" (مسافة)

حدد جميع عناصر <i> داخل <p> العناصر:

$('p i')

اختيار الطفل: ">"

حدد جميع عناصر <ul> التي تمثل أطفالًا فوريًا لعنصر <li> :

$('li > ul')

محدّد الأخوة المجاور: "+"

حدد جميع عناصر <a> التي يتم وضعها مباشرة بعد عناصر <h2> :

$('h2 + a')

General Sibling Selector: "~"

حدد جميع عناصر <span> التي هي أشقاء لعناصر <div> :

$('div ~ span')

فقط أذكر حالة أخرى بعنصر:

Eg <div id="title1" class="ABC">

فقط اكتب: $("div#title1.ABC")


لست بحاجة إلى jQuery لهذا الغرض

في Vanilla يمكنك القيام بما يلي:

document.querySelectorAll('.a.b')

لهذه القضية

<element class="a">
  <element class="b c">
  </element>
</element>

ستحتاج إلى وضع مسافة بين .a و .bc

$('.a .b.c')

مجموعة المختار

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

يصبح هذا:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

لذا في حالتك ، جربت منتقي المجموعة بينما تقاطعها

$(".a, .b") 

بدلا من ذلك استخدام هذا

$(".a.b") 

$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>





jquery-selectors