web-dev-qa-db-fra.com

sélecteur d'attribution de données jQuery for the parent le plus proche

Les attributs de données de mon code sont définis ci-dessous pour de nombreux éléments (non pour tous les éléments).

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

Et, pour certains éléments, l'attribut de données est défini avec l'approche ci-dessous.

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

Maintenant, le problème vient. Lorsque n'importe quel bouton du document est cliqué, je dois trouver son parent dont l'attribut de données (test) est défini. Comme mentionné, tous les éléments n’ont pas d’attribut data, je dois donc remonter dans la hiérarchie jusqu’à ce que l’élément attendu soit trouvé.

Pour l'approche n ° 1, $("#buttonID").closest("[data-testing]") fonctionne. Mais pas pour l'approche n ° 2.

Pour l'approche n ° 2, je dois parcourir le bouton parents() et vérifier s'il contient ou non .data("testing"). J'ai besoin d'éviter cette itération. Et avoir une approche commune qui fonctionne pour les n ° 1 et n ° 2.

Ici, il n'est pas nécessaire de vérifier la valeur de data-testing, mais d'obtenir le premier parent de la hiérarchie ayant "testing" défini comme attribut de données.

Merci d'avance.

Démo JSFIDDLE

javascriptjqueryclosest
8
DevD

Vous avez seulement deux choix:

Comme vous l'avez mentionné dans le premier choix, vous devez parcourir tous les éléments, car $("#ElementID").data("testing", "data value"); ne mettra PAS à jour l'attribut data-testing, car la valeur est stockée en interne dans le DOM.

La deuxième méthode consiste à ajouter une autre classe pouvant être utilisée dans le sélecteur:

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

Ainsi, votre nouveau sélecteur serait:

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

JS Fiddle Exemple

8
Erik Philips

essayez ceci (travail pour # 2): sélecteur de données

par exemple: $ ('[data-testing],: data (testing)')

1
MJ Vakili

Essayez ceci: $("#buttonID").closest(["data-testing"]) changez simplement pour suivre:

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

ou utilisez $(this).parents("[data-testing]") pour votre choix

2ème démo

0
Ahosan Karim Asik

Vous pouvez essayer la solution ci-dessous:

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

pour votre référence: http://jsfiddle.net/on24Lzxj/

0
Stack Overflow User

Au lieu de définir data-testing à .data(), vous pouvez utiliser attr():

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

Cela ajoutera l'attribut et la valeur à l'élément.

Ensuite, votre sélecteur normal devrait fonctionner:

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

Éditer en fonction des commentaires:

Les attributs de paramètres utilisant .attr() et leur utilisation avec .data() peuvent être problématiques (comme le montre clairement Eriks fiddle-example here ), car ce dernier ne vérifie qu'une fois l’attribut d’élément réel.

Je suggérerais d'utiliser .attr() lors du paramétrage et de l'obtention, mais puisque l'implémentation n'a pas pu être modifiée, ce n'est pas une option dans ce cas.

De toute façon, je laisserai ma réponse ici, car je le recommanderais quand même si ce n'était pas le cas.

0
Mackan

Essaye ça:

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

où $ (this) sera l’élément cliqué actuellement dans le gestionnaire de clics.

0
K K