JQuery හි බහු පන්ති සහිත අංගයක් තෝරා ගන්නේ කෙසේද?


2066

මම පන්ති දෙක ඇති බව සියලු අංග තෝරා ගැනීමට අවශ්ය aසහb .

<element class="a b">

එබැවින්, ඇති මූලද්රව්ය පමණි පන්ති දෙකම .

මම $(".a, .b")එය භාවිතා කරන විට එය සමිතිය ලබා දෙයි, නමුත් මට අවශ්‍ය වන්නේ මංසන්ධියයි.


2
නවකයන් සඳහා අපට එකමුතුකම හා මංසන්ධිය යන්නෙන් අදහස් කරන්නේ කුමක්ද යන්න ඔබට අර්ථ දැක්විය හැකි නම් හොඳයි :)
කොලොබ් කැනියොන්

10
O කොලොබ් කැනියන් යුනියන් සහ ඡේදනය මූලික කුලක න්‍යාය සංකල්ප වේ. උදාහරණයක් ලෙස වෘත්තීය සමිතියක් යනු සියලුම ප්‍රංශ කථිකයන් (පිරිමින් සහ කාන්තාවන් යන දෙකම ඇතුළත් වේ) වන අතර, මංසන්ධියක් යනු ප්‍රංශ භාෂාව කතා කරන සියලුම කාන්තාවන් වේ (ප්‍රංශ භාෂාව කතා නොකරන සියල්ලන් බැහැර කරයි, සහ කාන්තාවන් නොවන සියලු පුද්ගලයින් බැහැර කරයි). එක් එක් කට්ටලය නිර්වචනය කරන ඕනෑම ලක්ෂණ ගණනාවකින් වෘත්තීය සමිති හා මංසන්ධි කළ හැකිය. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
කැතරින් ඔස්බෝන්

6
මම හිතන්නේ ඔබ අදහස් කළේ "කාන්තාවන්" සහ "ප්‍රංශ-කථිකයන්" යන කට්ටල දෙකෙන්, සමිතිය ලෝකයේ සියලුම කාන්තාවන් සහ ලෝකයේ සියලුම ප්‍රංශ-කථිකයන් වනු ඇති අතර, කතා නොකරන කාන්තාවන් දෙදෙනාම ඇතුළත් වන කට්ටලයක් ප්‍රංශ සහ ප්‍රංශ කතා කරන මිනිසුන්. මංසන්ධිය යනු ඔබ ලියා ඇති පරිදි ප්‍රංශ භාෂාව කතා කරන කාන්තාවන් පමණි.
Teemu Leisti

Answers:


2630

ඔබට පන්ති දෙකම සමඟ මූලද්‍රව්‍ය පමණක් ගැලපීමට අවශ්‍ය නම් (තාර්කික AND වැනි මංසන්ධියක්), අතර පරතරයක් නොමැතිව තේරීම් කාරක එකට ලියන්න :

$('.a.b')

ඇණවුම අදාළ නොවේ, එබැවින් ඔබට පන්ති මාරු කළ හැකිය:

$('.b.a')

එබැවින් පංති සමඟ divහැඳුනුම්පතක් ඇති මූලද්‍රව්‍යයක් aගැලපීමට bසහ cඔබ මෙසේ ලියනු ඇත:

$('div#a.b.c')

(ප්‍රායෝගිකව, ඔබට බොහෝ විට එම නිශ්චිතය ලබා ගැනීමට අවශ්‍ය නොවන අතර, හැඳුනුම්පතක් හෝ පන්ති තේරීමක් සාමාන්‍යයෙන් ප්‍රමාණවත් වේ : $('#a').)


9
La ෆ්ලැටර්: එය උදාහරණ සඳහා පමණි. පංති bහා cගතිකව එකතු කර ඇත්නම් එය ප්‍රයෝජනවත් විය හැකි අතර ඔබට අවශ්‍ය වන්නේ එම පංති තිබේ නම් මූලද්‍රව්‍යය තෝරා ගැනීමයි.
සාෂා චෙඩිගොව්

3
ආහා, හොඳ කරුණක් :-) මේ වන තෙක් මම .hasClass () භාවිතා කර ඇති නමුත් මෙය වඩා හොඳ අංකනයකි.
ෆ්ලැටර්

4
තෝරා මෙම ක්රමය ද උදා .ab CSS සඳහා ක්රියා {ශෛලිය ගුණ} බලන්න: css-tricks.com/multiple-class-id-selectors
ක්රිස් Halcrow

30
H ෂිමී: ඔව්. තේරීම්කරුවන් දෙදෙනෙකු අතර ඇති ඉඩක් යනු ඔබ පැවත එන්නන් සොයන බවයි; එනම් .a .bපංතිය bසහිත මූලද්‍රව්‍යයකින් පැවත එන පන්තිය සහිත මූලද්‍රව්‍ය සෙවීම a. එබැවින් යම් දෙයක් div aනැවත ලබා දෙන්නේ aමූලද්‍රව්‍යයක් තුළ ඇති divමූලද්‍රව්‍ය පමණි.
සාෂා චෙඩිගොව්

2
AAaA: එය වැරදියි; jQuery ආරම්භයේ සිටම එය එසේ වී ඇත, මන්ද CSS ක්‍රියා කරන්නේ එලෙසය. කොමාව මඟින් තේරීම් කරුවන්ට ගැලපෙන අංග තෝරා ගනී (එය තාර්කික හෝ OR ලෙස සිතන්න), දෙකම නොවේ, එබැවින් එය එකම දෙයක් නොවේ (එය අවුල් සහගත වන්නේ කෙසේදැයි මට පෙනේ).
සාෂා චෙඩිගොව්

174

filter()ශ්‍රිතය භාවිතයෙන් ඔබට මෙය කළ හැකිය :

$(".a").filter(".b")

16
මෙම පිළිතුර සහ පිළිගත් පිළිතුර අතර වෙනස කුමක්ද?
විවියන් ගඟ

49
Rice රයිස්: මෙය ටිකක් මන්දගාමී වනු ඇත, මන්ද එය පළමුව "අ" පන්තිය සහිත වස්තු ලැයිස්තුවක් සාදනු ඇත, පසුව "ආ" පන්තිය හැර අනෙක් සියල්ල ඉවත් කරන්න, නමුත් මගේ මෙය එක් පියවරකින් සිදු කරයි. නමුත් වෙනත් ආකාරයකින්, වෙනසක් නැත.
සාෂා චෙඩිගොව්

5
පළමු උදාහරණයේ වාක්‍ය ඛණ්ඩය සමඟ ක්‍රියා නොකරන විචල්‍යයක් ලෙස අර්ථ දක්වා ඇති පංතියක් මා සොයමින් සිටි අවස්ථාවක මෙය මට වැඩ කළේය. උදා: $ ('. foo'). පෙරණය (විචල්‍යය). ස්තූතියි
pac

7
acpac: '('. foo '+ විචල්‍යය) උපක්‍රමය කළ යුතුව තිබුනි, නමුත් මෙම ක්‍රමය වඩාත් පැහැදිලි වන්නේ කොතැනදැයි මට පෙනේ.
සාෂා චෙඩිගොව්

6
ඔබ දැනටමත් සොයාගෙන .aඇති අතර මුල් .aකට්ටලයට අයත් විවිධ අත්තනෝමතික පන්ති පදනම් කර ගෙන කිහිප වතාවක් පෙරීමට අවශ්‍ය නම් මෙය වඩාත් කාර්යක්ෂම වේ.
ක්වික්ස් - මොනිකා

123

නඩුව සඳහා

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

ඔබ අතර අවකාශයක් දැමීමට අවශ්ය වනු ඇත .aහා.b.c

$('.a .b.c')

ඔබගේ පිළිතුරට එකතු කිරීම නඩුව පහත පරිදි නම් b සහ c යන දෙකටම ප්‍රවේශ වන්නේ කෙසේදැයි දැන ගැනීමට මම කැමතියි: <element class = "a"> <element class = "b"> </element> <element class = "c" > </element> </element>? $ ('. A. .b.c') හරහා වැරදි ප්‍රති .ල ලබා දෙයි.
ඉප්සිටා රූට්

මෙම උදාහරණයේ දී, තේරීම්කරු $('.a .c.b')ද වැඩ කරයි ද?
ඩැනියෙල් ඩබ්ලිව්.

ඔව්, ඇණවුම වැදගත් නොවන බැවින්.
සිම් 84

$('.a > element')
ඇලෙක්ස්

64

ඔබට ඇති ගැටළුව නම්, ඔබ භාවිතා කරන්නේ a Group Selectorවන අතර ඔබ භාවිතා කළ යුත්තේ a Multiples selector! වඩාත් නිශ්චිතව කිවහොත්, ඔබ භාවිතා කරන $('.a, .b')අතර ඔබ භාවිතා කළ යුතුය $('.a.b').

වැඩි විස්තර සඳහා, පහත තේරීම් කරන්නන් ඒකාබද්ධ කිරීම සඳහා විවිධ ක්‍රම පිළිබඳ දළ විශ්ලේෂණය බලන්න!


කණ්ඩායම් තේරීම්: ","

සියලුම <h1>අංග සහ සියලුම <p>අංග සහ සියලු <a>අංග තෝරන්න :

$('h1, p, a')

බහු තේරීම්: "" (අක්ෂර නොමැත)

සියල්ල තෝරන්න <input>අංග type textපන්ති, codeසහ red:

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

පැවත එන තේරීම්කරු: "" (අවකාශය)

<i>මූලද්රව්ය තුළ ඇති සියලුම අංග තෝරන්න <p>:

$('p i')

ළමා තේරීම්: ">"

<ul>මූලද්‍රව්‍යයක ක්ෂණික දරුවන් වන සියලුම අංග තෝරන්න <li>:

$('li > ul')

යාබද සහෝදර සහෝදරියන් තේරීම: "+"

<a>මූලද්‍රව්‍ය පසු වහාම ස්ථානගත කර ඇති සියලුම අංග තෝරන්න <h2>:

$('h2 + a')

සාමාන්‍ය සහෝදර සහෝදරියන් තේරීම: "~"

<span>මූලද්‍රව්‍යයන්ගේ සහෝදර සහෝදරියන් වන සියලුම අංග තෝරන්න <div>:

$('div ~ span')


26

මූලද්රව්යය සමඟ තවත් සිද්ධියක් සඳහන් කරන්න:

උදා <div id="title1" class="A B C">

ටයිප් කරන්න: $("div#title1.A.B.C")



20

වඩා හොඳ කාර්ය සාධනය සඳහා ඔබට භාවිතා කළ හැකිය

$('div.a.b')

මෙය ඔබගේ පිටුවේ ඇති සියලුම html මූලද්‍රව්‍යයන් හරහා ගමන් කරනවා වෙනුවට div මූලද්‍රව්‍ය හරහා පමණක් පෙනෙනු ඇත.


9

කණ්ඩායම් තේරීම්

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") 

4

ඔබට අවශ්‍ය නැත jQuery සඳහා

දී Vanillaඔබට කළ හැකි දේ:

document.querySelectorAll('.a.b')

2018 දී ඇත්ත, නමුත් මෙම ප්‍රශ්නය 2009 දී විමසන ලදි
මිචියෙල්

3

ඔබගේ කේතය $(".a, .b")පහත සඳහන් මූලද්‍රව්‍ය සඳහා ක්‍රියා කරයි (එකවර)

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

ඔබට <element class="a b">කෝමා නොමැතිව js භාවිතා කරනවාට වඩා පන්තිය a හා b යන මූලද්‍රව්‍ය තෝරා ගැනීමට අවශ්‍ය නම්

$('.a.b')

2

getElementsByClassName()ඔබට අවශ්‍ය දේ සඳහා ක්‍රමයක් භාවිතා කළ හැකිය .

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);
<ul>
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>
</ul>

වේගවත්ම විසඳුම මෙයයි. ඔබට ඒ පිළිබඳ මිණුම් ලකුණක් මෙහි දැකිය හැකිය .


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.