私のコードには、以下の方法で多くの要素(すべての要素ではない)のデータ属性が設定されています。
<div id='dvStorage' data-testing='storage_div'>
_また、一部の要素(すべての要素ではない)のデータ属性は、以下の方法で設定されます。
$("#ElementID").data("testing", "data value");
今、問題が発生します。ドキュメントのいずれかのボタンをクリックすると、データ属性(テスト)が設定されている親を見つける必要があります。前述のように、すべての要素にはデータ属性がないため、期待される要素が見つかるまで、階層を上に移動する必要があります。
#1のアプローチでは、$("#buttonID").closest("[data-testing]")
が機能します。しかし、#2のアプローチではありません。
#2のアプローチの場合、ボタンparents()
を反復処理し、.data("testing")
があるかどうかを確認する必要があります。この繰り返しを避ける必要があります。そして、#1と#2で機能する1つの共通のアプローチがあります。
ここでは、データテストの値を検証する必要はありませんが、データ属性として「テスト」が設定されている階層の最初の親を取得する必要があります。
前もって感謝します。
選択肢は2つだけです。
最初の選択肢で述べたように、$("#ElementID").data("testing", "data value");
は属性data-testing
を更新しないため、すべての要素を反復処理する必要があります。これは、値がDOMに内部的に格納されるためです。
2番目の方法は、セレクターで使用できる別のクラスを追加することです。
$("#ElementID").data("testing", "data value").addClass("has-testing");
したがって、新しいセレクターは次のようになります。
$("#buttonID").closest("[data-testing], .has-testing");
これを試してください(#2で機能): data-selector
e.g: $('[data-testing] , :data(testing)')
これを試してください:$("#buttonID").closest(["data-testing"])
を次のように変更します:
_$("#buttonID").closest("[data-testing]");
_
または$(this).parents("[data-testing]")
を選択して使用します
_data-testing
_を.data()
で設定する代わりに、attr()
を使用できます。
_$("#div1").attr("data-testing", "div1_Data");
_
これにより、属性と値が要素に追加されます。
次に、通常のセレクターが機能します。
_$("#buttonID").closest("[data-testing]")
_
コメントに基づいて編集:
.attr()
を使用して属性を設定し、.data()
を使用して属性を取得すると、問題が発生する可能性があります(Eriks fiddle-example here で明らかです)。後者は実際の要素のみをチェックするためです一度属性。
設定と取得の両方で.attr()
を使用することをお勧めしますが、実装を変更できなかったため、これはこの場合のオプションではありません。
とにかく私が答えを残しておきます。そうでない場合でも、私はそれをお勧めします。
これを試して:
$(this).parents("[data-testing]:first");
$(this)は、クリックハンドラー内で現在クリックされている要素です。