sélection de l'élément racine dans jQuery

Question

Je dois pouvoir sélectionner l'élément racine dans un fragment sans connaître les types de nœud, la classe, l'identifiant ou la hiérarchie.

<div id="0">
    <div id="0a">
        <div id="a01"></div>
    </div>
    <div id="0b">
    </div>
    <div id="0c">
    </div>
</div>

Je veux pouvoir faire quelque chose comme $ (': root') et avoir 0 sélectionné dans l'exemple ci-dessus.

Mieux encore, je préférerais $ (': niveau (0)') , ce qui signifierait la même chose que ci-dessus, $ (': niveau (1)') sélectionnerait 0a, 0b et 0c et $ (': niveau (1) > div') sélectionnerait a01.

Des idées sur la façon de le faire proprement?

Answer 1

Bien que cette question ait reçu une réponse exacte il y a quelque temps parfaitement correctement - j’essayais simplement de tenter cela moi-même et je n’aimais pas trop utiliser un sélecteur tel que *: not (* *) - principalement à cause des frais généraux probables. Je ne sais pas s'il s'agit d'un ajout récent à la capacité de jQuery (j'utilise 1.8) mais vous pouvez utiliser:

$(':eq(0)');

Ceci sélectionnera le premier élément non-textnode trouvé. Ainsi, à moins que le dom que vous parcourez ne soit illégal dans sa formation, vous devriez toujours obtenir l'élément racine. Il est également très optimal car jQuery doit savoir s’arrêter après le premier élément trouvé.

Alors, voici un petit quelque chose pour tous les fans de WSOD:

$(':eq(0)').remove();

Oh, juste au cas où il ne serait pas évident que les extraits de code ci-dessus illustrent simplement le sélecteur, et que vous vous retrouviez à travailler avec un fragment partiel (plutôt que le document complet), vous devriez alors utiliser ce sélecteur avec le filtre de jQuery. méthode:

$(fragment).filter(':eq(0)');

Toutefois, lorsque vous utilisez des fragments, vous pouvez simplement procéder comme suit:

$(fragment).get(0);

Bien que gardez à l'esprit que .get (0) peut sélectionner des nœuds texte / commentaire s'ils sont le premier élément de votre document, alors que l'approche du filtre trouvera toujours le premier élément réel.

Answer 2

OK, vous devez donc procéder comme suit (en supposant que vous utilisiez l'exemple fourni), si vous souhaitez rechercher le nœud de niveau supérieur à l'aide de jquery, procédez comme suit:

 $('*:not(* *)');  

Ce que vous demandez littéralement ici concerne tous les nœuds qui ne sont pas des enfants d'autres nœuds. Le problème est que pour un document HTML, cela ne vous donnera toujours que l'élément HTML, ce qui n'est pas particulièrement utile. Donc, si vous voulez trouver l'élément de niveau supérieur dans le corps d'un document HTML, vous utiliserez quelque chose de beaucoup plus simple:

 $('body > *');

si vous vouliez alors le deuxième niveau, vous iriez juste

 $('body > * > *');

Mais, en supposant que vous ayez une sorte de structure de document arbitraire (comme celle de foo que vous avez mentionnée), vous pouvez utiliser le premier exemple pour trouver le premier niveau:

 $('*:not(* *)');

puis pour le deuxième niveau

 $('*:not(* *)').find('> *');

et pour le troisième niveau

 $('*:not(* *)').find('> * > *');

et ainsi de suite. Si vous recherchez un élément div racine (en supposant que votre échantillon ressemble à la question), vous pouvez le faire:

 $('div:not(div div)');

et ainsi de suite, en remplaçant * par div. Vous ne savez pas vraiment pourquoi vous voulez faire cela, mais cela fonctionnera. Le problème est que la question ne fournit pas suffisamment de contexte pour que nous puissions vous proposer une meilleure alternative.

Answer 3

Je suis plutôt un gars de prototype, mais je pense que vous pourriez obtenir tous les nœuds puis obtenir le premier nœud du tableau:

$('*')[0]

Ensuite, récupérez les éléments enfants de cela (pour 0a, 0b et 0c)

$('*')[0].children()

Answer 4

Si vous avez vos éléments sous forme de fragment jQuery tel que:

var myElements = $('<div id="0">
<div id="0a">
    <div id="a01"></div>
</div>
<div id="0b">
</div>
<div id="0c">
</div>
</div>');

alors vous pouvez trouver le premier élément par:

myElements.filter(":first")

La fonction de filtre recherche l'élément racine du fragment.

Answer 5

jQuery n'est pas nécessaire ...

var root = document.firstChild;

Answer 6

Je comprends peut-être mal la question, mais en supposant que par racine vous entendiez le point où le parent est une étiquette différente de celle de l'enfant, les éléments suivants devraient alors fonctionner.

function GetRoot(element) {
    while(element.parent().attr("tagName") == element.attr("tagName")) {
        element = element.parent();
    }

    return element;
}

En gros, cela parcourt l’arbre jusqu’à ce qu’il trouve un parent qui est une balise différente, puis renvoie l’élément. Dans votre exemple, cela voudrait dire que si votre élément était dans un, ou quoi que ce soit, il le détecterait comme étant la racine et le renverrait.

Créer un sélecteur de requête personnalisé avec cela devrait être possible aussi, mais est évidemment plus compliqué.

Il devrait également être assez facile d’étendre ceci pour prendre un entier qui définit le niveau. Tout ce que vous avez à faire est de descendre l’arbre à la profondeur spécifiée une fois que vous avez trouvé la racine et de renvoyer ces éléments.

Answer 7

vous pourriez envisager d’utiliser les fonctions parent () et enfants (). est que vous devez aller à plusieurs niveaux, vous pouvez les enchaîner comme si.

$("#a01").parent().parent()  //returns <div id="0">

s'il vous plaît voir mon commentaire, et je vais essayer de donner une meilleure solution.

Answer 8

Je reçois un fragment html de l'appel ajax, et j'ai également besoin d'obtenir le div racine. J'ai simplement appelé $ (data) , et jQuery analysera le texte renvoyé au format HTML et vous indiquera la racine.

$.ajax path,
  type: 'GET'
  contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
  success: (data) ->
    $(data)

Answer 9

Si vous souhaitez sélectionner le parent de niveau supérieur d'un élément tout en restant sous le corps, je le ferais

$(obj).parents().filter('body > *')