jQuery ค้นหาองค์ประกอบตามค่าแอตทริบิวต์ข้อมูล

104

ฉันมีองค์ประกอบบางอย่างดังต่อไปนี้:

<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

ฉันจะเพิ่มคลาสให้กับองค์ประกอบที่มีdata-slideค่าแอตทริบิวต์เป็น0(ศูนย์) ได้อย่างไร

ฉันได้ลองวิธีแก้ปัญหาต่างๆมากมาย แต่ไม่ได้ผล ตัวอย่าง:

$('.slide-link').find('[data-slide="0"]').addClass('active');

ความคิดใด ๆ ?

— MrUpsidown
แหล่งที่มา

2

ที่จะอธิบายสิ่งเล็ก ๆ น้อย ๆ ที่นี่เป็นเหตุผลว่าทำไมนี้ไม่ได้ทำงานเป็นเพราะคุณกำลังพยายามที่จะหาลูกหลานของที่มีคุณลักษณะของ.slide-link [data-slide="0"]เนื่องจากบางสิ่งบางอย่างไม่สามารถเป็นลูกหลานของตัวเองได้จึงไม่มีสิ่งใดตอบแทน อย่างไรก็ตามหากคุณมีกระดาษห่อหุ้มรอบ ๆ ลิงก์เหล่านี้สิ่งนี้จะใช้งานได้:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— DondeEstaMiCulo

ดูstackoverflow.com/q/4191386/292060

— goodeye

228

ใช้Attribute Equals Selector

$('.slide-link[data-slide="0"]').addClass('active');

Fiddle Demo

.หา()

มันทำงานลงต้นไม้

รับลูกหลานของแต่ละองค์ประกอบในชุดองค์ประกอบที่ตรงกันปัจจุบันกรองโดยตัวเลือกวัตถุ jQuery หรือองค์ประกอบ

— Tushar Gupta - curioustushar
แหล่งที่มา

2

ความผิดฉันเอง. ฉันได้ลองแล้ว แต่ผิดที่ (ก่อนจะเพิ่มองค์ประกอบแบบไดนามิก ... ) ขอบคุณสำหรับความพยายาม! ใช้งานได้ดี

— MrUpsidown

@MrUpsidown ยินดีต้อนรับยินดีช่วย :)

— Tushar Gupta - curioustushar

1

ว้าว! วิธีนี้ดีมาก! มีปัญหาเป็นเวลาหลายชั่วโมง แต่สิ่งนี้แก้ไขได้!

ฉันจะเทียบเคียงกับค่าตัวแปรvar slidernumber = "0";แทนค่าคงที่ได้"0"อย่างไร

— tony gil

หากด้วยเหตุผลบางประการคุณไม่สามารถพึ่งพาคลาสบางคลาสที่มีอยู่ได้คุณก็สามารถใช้สัญลักษณ์แทนสำหรับส่วนแรกเช่น $ ('* [data-slide = "0"]'). addClass ('active') ;

— SeanMC

59

คุณยังสามารถใช้. filter ()

$('.slide-link').filter('[data-slide="0"]').addClass('active');

— แอนตัน
แหล่งที่มา

6

ฉันค้นหาวิธีแก้ปัญหาเดียวกันโดยใช้ตัวแปรแทน String
ฉันหวังว่าฉันจะสามารถช่วยใครบางคนในการแก้ปัญหาของฉัน :)

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);

— อเลชานี
แหล่งที่มา

3

คุณยังสามารถใช้andSelf()วิธีการรับ Wrapper DOM ที่มีจากนั้นfind()สามารถแก้ไขได้ตามความคิดของคุณ

$(function() {
  $('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');
})

.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

ขยายข้อมูลโค้ด

— Girish
แหล่งที่มา