Dev Faq
12
votes

Comment choisir l'élément le plus profond?

En JQuery, comment puis-je descendre aussi loin que possible dans l'arbre HTML?

Pour la simplicité, je n'ai qu'un seul chemin descendant.

(associé mais bonus: comment trouver l'élément le plus profond avec plusieurs chemins descendus?) xxx

Je veux changer le HTML interne de la cellule Nommé cellule0 mais je ne connais pas nécessairement les noms de toutes les classes à l'intérieur. Est-il possible de choisir cela loin sans connaître ces noms?

Merci beaucoup!

6 commentaires

Que voudriez-vous arriver s'il y avait deux frères et soeurs

s dans le ?

Je sais que votre exemple de code n'est qu'un exemple, mais je sens que je dois souligner que c'est invalide HTML car vous avez un

et entre eux.

@Spudley: Merci Spudley, je l'ai réparé.

@CDHOWIE: Comportement non déterministe! Le premier ou le dernier dans la portée de la balise précédente irait bien, je chiffre le retour du dernier que vous vérifiez est probablement plus facile.

Puis-je vous demander pourquoi vous avez besoin de l'élément le plus profond? Je ne peux pas penser à un problème qui nécessiterait une telle sélection.

@galambalaz: partiellement curiosité en général, mais j'ai une interface de contenu de cellules de click-to-éditeur pour le moment. Ajout de divs au format Les propriétés de texte / débordement ont été utiles, mais l'interface me permet d'éditer le HTML DIV brut car il ne concerne que le niveau

sans
.

10 Réponses :

1
votes

Eh bien, à partir d'une base que vous n'avez aucune idée de l'emplacement de ce nœud "le plus profond", vous pouvez faire quelque chose comme ceci: xxx pré>

puis p> xxx

serait (à l'exception des 12 bugs probablement dans mon code) serait un objet JQuery pour l'ensemble des éléments les plus profonds. p>

éditer em> - une de mes douzaines de bogues Est-ce que cela ne tient pas compte de la profondeur du (s) noeud de départ (s) - ce serait un tour pour comprendre. Peut être préférable de le refroidir afin qu'il trouve le plus profond de la liste initialement sélectionnée: p> xxx pré>

et pour obtenir le plus profond de la page que vous feriez: p > 

var deepest = $('*').betterDeepest();

0 commentaires
1
votes

avec un seul chemin: xxx

Si je gagne le temps, je vais mettre à jour ma réponse avec le code de plusieurs chemins.

3 commentaires

sucré. Je n'étais pas au courant du mot-clé Suivant .

@sova - Il n'y a pas de Suivant mot-clé. Ici c'est juste un nom de variable.

@sova: Suivant n'est pas un mot-clé en JavaScript. Étant donné que la syntaxe sur ce site prend en charge plusieurs langues, il met parfois en évidence les mots d'autres langues.

0
votes

Peut-être pas le plus efficace, mais vous pourriez faire cela:

Exemple: http. : //jsfiddle.net/5n3y7/ xxx

ou ceci:

Exemple: http://jsfiddle.net/5n3y7/2/

(les résultats Dans l'exemple semblent être à différents niveaux, mais c'est parce que le navigateur insère l'insertion du .) xxx

0 commentaires
0
votes

Ce n'est pas spécifique à JQuery, mais cette solution récursive peut être modifiée pour faire ce que vous voulez. XXX

2 commentaires

Veuillez expliquer pourquoi votre instruction de commutation n'a qu'un seul cas

Notez mon commentaire sur "Être ajusté", auquel cas vous voudrez peut-être faire d'autres choses, par exemple gérer les nœuds de texte, etc. Certes, il semble un peu bizarre tel qu'il est ... mais j'utilise généralement ce formulaire pour marcher l'arbre DOM. Je vais mettre un commentaire là-bas pour le rendre clair ...

5
votes

Je ferais cela via une seule fonction récursive: xxx

0 commentaires
0
votes

La première chose que je ferais est de gérer un Profond First Search (DFS) et Gardez une trace du niveau que j'étais à chaque noeud dans le DOM.

Pour sauvegarder avoir à effectuer un fichier DF complet chaque fois que vous souhaitez modifier quelque chose (en supposant que vous souhaitez le faire plusieurs fois), vous pouvez marquer chaque nœud DOM avec son niveau dans l'arborescence car la recherche est effectuée. . (Encore une fois, vous pouvez peut-être faire ce niveau de marquage au cours de la génération de la table?) Une fois la recherche terminée et que vous avez déterminé le nœud le plus profond, gardez une référence à ce nœud.

À partir de ce point, vous devriez être capable de mettre à jour rapidement ce que le nœud est au niveau le plus profond à tout moment.

0 commentaires
26
votes

Pour un chemin unique, trouver simplement l'élément qui n'a pas de noeuds d'enfants: xxx

ou, dans votre cas plus spécifique $ ('# cellule0 *: non (: a ("*")) ')');

pour plusieurs chemins - Quoi qu'il y ait plusieurs nœuds également imbriqués? Cette solution vous donnera une matrice de tous les nœuds avec le plus grand nombre d'ancêtres. xxx

à nouveau, dans votre situation, vous voulez probablement arriver aux éléments les plus profonds des cellules de table, de sorte que vous "Ret retour à une doublure: xxx

- cela retournera un objet JQuery contenant tous les nœuds enfants les plus internes de chaque cellule de votre table.

0 commentaires
0
votes

Je pense que c'est un échantillon le plus court pour vous: 

$('#cell0 :last').text('new information')

0 commentaires
0
votes

très tard à la fête, mais voici ma solution générique. 

var elements$ = $(':contains("your text")');
var result = elements$.filter((index, element) => 
        index === elements$.length || 
        ! $.contains(element, elements$.get(index+1))
    );

0 commentaires
2
votes

Cette question a une réponse simple et bonne quand pour JQuery. Cependant, je cherchais une solution élégante sans elle. Puisque : a code> n'est pas pris en charge dans aucun navigateur, je suis arrivé avec celui-ci ici. 

Array.from( document.querySelectorAll( 'body *' ) )
  .filter( e => !e.children.length );

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO