web-dev-qa-db-ja.com

最も近い親のjQueryデータ属性セレクター

私のコードには、以下の方法で多くの要素（すべての要素ではない）のデータ属性が設定されています。

  1. _<div id='dvStorage' data-testing='storage_div'>_

また、一部の要素（すべての要素ではない）のデータ属性は、以下の方法で設定されます。

  1. $("#ElementID").data("testing", "data value");

今、問題が発生します。ドキュメントのいずれかのボタンをクリックすると、データ属性（テスト）が設定されている親を見つける必要があります。前述のように、すべての要素にはデータ属性がないため、期待される要素が見つかるまで、階層を上に移動する必要があります。

＃1のアプローチでは、$("#buttonID").closest("[data-testing]")が機能します。しかし、＃2のアプローチではありません。

＃2のアプローチの場合、ボタンparents()を反復処理し、.data("testing")があるかどうかを確認する必要があります。この繰り返しを避ける必要があります。そして、＃1と＃2で機能する1つの共通のアプローチがあります。

ここでは、データテストの値を検証する必要はありませんが、データ属性として「テスト」が設定されている階層の最初の親を取得する必要があります。

前もって感謝します。

JSFIDDLEデモ

javascriptjqueryclosest
9
DevD

選択肢は2つだけです。

最初の選択肢で述べたように、$("#ElementID").data("testing", "data value");は属性data-testingを更新しないため、すべての要素を反復処理する必要があります。これは、値がDOMに内部的に格納されるためです。

2番目の方法は、セレクターで使用できる別のクラスを追加することです。

$("#ElementID").data("testing", "data value").addClass("has-testing");

したがって、新しいセレクターは次のようになります。

$("#buttonID").closest("[data-testing], .has-testing");

JS Fiddle例

8
Erik Philips

これを試してください（＃2で機能）： data-selector

e.g: $('[data-testing] , :data(testing)')
1
MJ Vakili

これを試してください：$("#buttonID").closest(["data-testing"])を次のように変更します：

_$("#buttonID").closest("[data-testing]");
_

または$(this).parents("[data-testing]")を選択して使用します

2番目のデモ

0
Ahosan Karim Asik

以下の解決策を試すことができます：

$("body *[data-testing]:first");

参考までに： http://jsfiddle.net/on24Lzxj/

0
Stack Overflow User

_data-testing_を.data()で設定する代わりに、attr()を使用できます。

_$("#div1").attr("data-testing", "div1_Data");
_

これにより、属性と値が要素に追加されます。

次に、通常のセレクターが機能します。

_$("#buttonID").closest("[data-testing]")
_

コメントに基づいて編集：

.attr()を使用して属性を設定し、.data()を使用して属性を取得すると、問題が発生する可能性があります（Eriks fiddle-example here で明らかです）。後者は実際の要素のみをチェックするためです一度属性。

設定と取得の両方で.attr()を使用することをお勧めしますが、実装を変更できなかったため、これはこの場合のオプションではありません。

とにかく私が答えを残しておきます。そうでない場合でも、私はそれをお勧めします。

0
Mackan

これを試して：

$(this).parents("[data-testing]:first");

$（this）は、クリックハンドラー内で現在クリックされている要素です。

0
K K