Les identifiants en double bousillent-ils les sélecteurs jQuery?

Question

Si j'avais deux divs, les deux avec id = & "monDIV &";

Est-ce que $("#myDiv").fadeOut(); ferait disparaître les deux divs? Ou est-ce qu'il s'effacerait seulement le premier / second? Ou aucun?

Comment puis-je changer lequel il s'estompe?

Remarque: Je sais que les identifiants en double sont conformes aux normes, mais j'utilise le popup modal de fancybox et cela duplique le contenu spécifié sur votre page pour le contenu du popup. Si quelqu'un connaît un moyen de contourner ce problème (peut-être que j'utilise mal fancybox), merci de me le faire savoir.

Answer 1

jQuery correspond exactement à un élément lors de la recherche d'un ID. Un tableau d'au plus un Element objet sera renvoyé par $("#foo").get(). Consultez la documentation jQuery pour plus d'informations, ou essayez-la vous-même.

$(function() {
    alert($("#foo").length);
});

Answer 2

Les ID d'élément sont supposés être uniques. Avoir plusieurs DIV du même identifiant serait incorrect et imprévisible, et irait à l'encontre de l'objectif de l'identifiant. Si vous avez fait ceci:

$('.myDiv').fadeOut();

Cela les effacerait tous les deux, à condition que vous leur attribuiez une classe de myDiv et des identifiants uniques (ou aucun).

Answer 3

& "; Remarque: je sais que l'identifiant en double est contre les normes &";

Alors ne le faites pas. Vous avez déjà identifié deux problèmes. Cela viole les standards et interfère avec le mécanisme de sélection de jQuery (et même du DOM habituel). Il y aura probablement plus de problèmes à l'avenir.

Il est fort possible que vous utilisiez fancybox de manière incorrecte, auquel cas j'espère que quelqu'un qui vous connaît le système vous aide. Ou pire, si le script lui-même est défectueux, vous ne devriez pas l'utiliser.

Answer 4

Comme $ ('# myDiv') ne renverra que la première div avec cet identifiant, vous devrez trouver tous les éléments portant cet identifiant à l'aide de cette astuce:

$('[id=myDiv]');

Donc, dans votre cas, appliquer le fadeOut à tous ces divs:

$('[id=myDiv]').fadeOut();

Et si vous voulez vous assurer que votre page ne possède pas cet ID deux fois, vous pouvez supprimer les éléments supplémentaires en procédant ainsi:

$('[id=myDiv]:gt(0)').remove();

Answer 5

Vous pouvez également utiliser la méthode find (). find retournera tous les éléments avec cet ID, et vous pouvez limiter la portée à un parent particulier si nécessaire, essayez quelque chose comme $(document).find('#myDiv').fadeOut();

ou

$('.parentElement').find('#myDiv').fadeOut();

Answer 6

J'ai rencontré le même problème. Apparemment, lorsque vous créez un contenu sur la page à partir de laquelle vous souhaitez ouvrir une Fancybox, cela crée un div en miroir du contenu d'origine. Dans mon cas, les contrôles ont été encapsulés dans une div créée par fancybox, & "; Fancy_div &";

.

J'ai pu sélectionner le contrôle et obtenir sa valeur & # 8217; en utilisant le format suivant pour le sélecteur:

$ ('# fancy_div [id = InputText]'). val ();

Vos contrôles peuvent exister ailleurs dans la Fancybox. la meilleure chose à faire est de regarder le point de vue, mais c'est délicat.

Pour accéder à la source de la vue, utilisez la technique suivante: Placez cette balise sur votre formulaire: Obtenir de la valeur Ouvrez votre formulaire, cliquez sur la balise pour ouvrir la fenêtre d'alerte.
Assurez-vous que votre curseur se trouve dans le contenu de la page (recherchez un contrôle et cliquez dessus).
Cliquez avec le bouton droit de la souris sur le contrôle et sélectionnez & «Afficher la source &»;
. Il y a un tas de divs, alors cherchez le div qui contient votre contenu.

J'espère que cela vous aidera.

Answer 7

J'ai récemment eu un problème similaire. J'avais une seule page qui affichait un contenu différent via une charge Ajax. Un bouton déclenche la génération d’une image PDF par le serveur.

Ma solution initiale consistait à utiliser un sélecteur de classe, qui fonctionnait bien mais provoquait des frictions avec un autre développeur. Il y avait déjà tellement de classes dans les liens que l'utilisation d'une classe comme identifiant rendait le code laid. J'ai donc utilisé un attribut de nom:

<a name="printButton"....

$('a[name="printButton"]').on('click',function(){....

A travaillé juste dandy!