Comment trouver l'élément suivant qui a un attribut ID à l'aide de jQuery

Lorsque je clique sur un lien, j'ai besoin de trouver la prochaine <section> qui a un attribut ID et le retour de son ID.

Donc le suivant le balisage et le javascript, je m'attends cliquant sur le lien à écrire "section_3" de la console.

<section id="section_1">
    <a href="#" class="findNext">Find</a>
</section>
<section></section>
<section id="section_3"></section>
<section id="section_4"></section>

et

$('a.findNext').click(function() {
    var nextSectionWithId = $(this).closest("section").next("section[id]");
    if (nextSectionWithId) {
        var sectionId = nextSectionWithId.attr('id');
        console.log(sectionId)
    }
});

Mais cela ne fonctionne pas. J'ai mis le code jusqu'ici dans jsFiddle.

Des idées pourquoi cela ne fonctionne pas?

  • .la prochaine n'est pas la recherche par le biais de tous les frères et sœurs, il ne regarde que l'immédiat prochaine. c'est dans les docs de l'api.
  • Si un sélecteur est fourni, il récupère le frère suivant seulement si elle correspond à celle que le sélecteur. Votre prochaine section n'a pas un id.
  • Excellent, j'ai évidemment mal interprété à dire "à la prochaine pour correspondre aux critères" non "à la prochaine si elle répond aux critères".
  • Vous n'êtes pas le premier, et de loin, ont fait de cette hypothèse.
InformationsquelleAutor Digbyswift | 2013-10-24
  1. 5

    Essayer :

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]:first");

    ou

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").filter(':first');

    Violon

    Vous ne pouvez pas utiliser la prochaine parce que la prochaine sera pour un match seulement dans l'élément suivant. De sorte que vous pouvez à la place utiliser nextAll combiné avec :première dans le sélecteur.

    Mise à jour

    Vous pouvez utiliser le (première) méthode jquery pour récupérer le premier élément de la collection ainsi ce qui semble être une option plus rapide.

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").first();

    Pourrait probablement être cette raison:

    Raison :la première est une extension jQuery et ne fait pas partie de la spécification CSS, des requêtes à l'aide :d'abord ne peut pas tirer profit de l'augmentation des performances fournies par les natifs de DOM querySelectorAll() la méthode. Pour obtenir les meilleures performances lors de l'utilisation :d'abord, pour sélectionner des éléments, sélectionnez d'abord les éléments à l'aide d'un pur sélecteur CSS, puis utiliser .filtre ("premier").

    Coutesy @T. J. Crowder

    • Vous l'avez trouvé? N'est-ce pas votre question 🙂 Bon à savoir!!
    • Oui, il est. 🙂 Je voulais dire "j'ai trouvé", comme dans "j'ai appris" (dans ce cas, à partir de Pseudo [et d'expérimentation]).
    • Oui, probablement, permettez-moi d'ajouter que, comme bien... dans la réponse... 🙂 Merci!!
    InformationsquelleAutor PSL
  2. 2

    Utilisation .nextAll()

    DÉMO

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]")[0].id;

    DÉMO

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").eq(0).attr('id');

    DÉMO

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").attr('id');
    • pourquoi down ont voté vérifier la DÉMO.
    • Je n'ai pas downvote, mais la raison pourrait être que l'OP veut trouver que le prochain élément de la condition, pas tous d'entre eux. attr('id') fonctionne parce qu'il ne considère que le premier élément de la collection.
    • nextAll renvoie une liste pas un élément individuel. Vous avez également besoin d' :premier sélecteur
    • vérifier la mise à jour de réponse .
    • C'est mieux 🙂 cela dit, il n'a l'air de fonctionner, mais la mise à jour de répondre à plus de sens.
    • Bien sûr, la mise à jour de la réponse va lever une exception si il n'y a pas tout les frères et sœurs avec ids, tandis que le .nextAll("section[id]").attr("id") sera de retour le id de le premier de la fratrie (le cas échéant) ou undefined si aucun, plutôt que de jeter. C'est l'un des rares cas d'utilisation où à l'aide de .attr("id") peut réellement faire sens (contrairement à la commune d'horreur $(this).attr("id") on voit trop souvent 🙂 ).
    • Vérifiez la mise à la réponse utilisé .eq(0) . Ty pour me dire ça 🙂
    • Il n'y a aucune raison d'utiliser .eq(0) si vous utilisez attr comme un getter. Lorsque attr (ou prop, ou css, ou text, ou html, ...) est utilisé comme un getter, il toujours ne regarde que le premier élément de l'ensemble. Je ne sais pas quelle est la réponse à l'origine ressemblait, mais si quelqu'un downvoted pour faire .nextAll(...).attr("id"), c'était leur mauvaise, pas le vôtre.
    • hahhah ma 1ère réponse, mais je suis Descendu-vote sur cette .
    • Mais notez que l'OP n'a pas dit qu'ils voulaient le valeur de la id. Ils ont dit qu'ils voulaient trouver le section (pour moi, cela signifie que l'élément, et non le id valeur). Donc .nextAll("section[id]").first() ou .nextAll("section[id]:first') comme dans les PSL de la réponse.
    • Oui, Monsieur . 🙂

    InformationsquelleAutor Tushar Gupta - curioustushar