jQuery veri özniteliği değerine göre öğeyi bulur

104

Aşağıdaki gibi birkaç öğem var:

<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Öznitelik değeri olan elemana nasıl sınıf ekleyebilirim?0 (sıfır) ?

Birçok farklı çözümü denedim ama hiçbir şey işe yaramadı. Bir örnek:

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

Herhangi bir fikir?

— MrUpsidown
kaynak

2

Buradaki şeyleri biraz açıklamak gerekirse, bunun işe yaramamasının nedeni, 'nin soyundan gelenleri' .slide-linközniteliğiyle bulmaya çalışmanızdır [data-slide="0"]. Bir şey kendi soyundan gelemeyeceği için geri dönecek bir şeyi yoktur. Ancak, bu bağlantıların etrafında bir sarmalayıcınız olsaydı, bu işe $('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— yarardı

Ayrıca bkz. Stackoverflow.com/q/4191386/292060

— goodeye

228

Öznitelik Eşittir Seçicisini Kullan

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

Fiddle Demo

.find ()

ağaçta çalışır

Seçici, jQuery nesnesi veya öğe ile filtrelenmiş geçerli eşleşen öğeler kümesindeki her öğenin alt öğelerini alın.

— Tushar Gupta - curioustushar
kaynak

2

Benim hatam. Bunu denedim ama yanlış yerde (öğelerimi dinamik olarak eklemeden önce ...). Neyse, çaba için teşekkürler! İyi çalışıyor.

— MrUpsidown

@MrUpsidown Hoş Geldiniz Yardıma Hoş Geldiniz :)

— Tushar Gupta - curioustushar

1

Vaov! bu çözüm harika! Saatlerce sorun yaşadım ama bu sorunu çözdü!

bunu var slidernumber = "0";sabit yerine bir değişken değere nasıl eşitlerim "0"?

— tony gil

Herhangi bir nedenden ötürü belirli bir sınıfın orada olmasına güvenemiyorsanız, o zaman ilk bölüm için bu $ ('* [data-slide = "0"]') gibi bir joker karakter kullanabilirsiniz. AddClass ('aktif') ;

— SeanMC

59

Ayrıca .filter () kullanabilirsiniz.

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

— Anton
kaynak

6

String yerine bir değişkenle aynı çözümü aradım.
Umarım birisine çözümümle yardımcı olabilirim :)

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

— Aleshanee
kaynak

3

Ayrıca, andSelf()sarmalayıcı DOM içermesi için yöntemi de kullanabilirsiniz , ardından find()fikriniz olarak kullanılabilir

$(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>

Snippet'i genişlet

— Girish
kaynak