以下のような要素があります。
<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');
何かアイデアはありませんか?
Attribute Equals Selector]を使用する(https://api.jquery.com/attribute-equals-selector/)
$('.slide-link[data-slide="0"]').addClass('active');
[Fiddle Demo]()
ツリーの下の方で動作します
各要素の子孫を取得します。 現在のマッチした要素のセットの中で、セレクタ、jQueryオブジェクト、または要素でフィルタリングされた要素の子孫を取得します。
また、andSelf()
メソッドを使ってラッパーの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>