1
votes

Comment sélectionner le dernier enfant dans l'arborescence en utilisant jQuery?

Supposons que j'ai une telle structure:

<div id="content">
    <div>
        <span>
            <b>
                <i>
                    <u>
                        <span>Price</span>
                    </u>
                </i>
            </b>
        </span>
    </div>
</div>

Dans ce cas, le nombre de balises à l'intérieur du div #content et celles qu'elles ne me connaissent pas . Je n'ai accès qu'à l'id content .

Comment puis-je obtenir le sélecteur à la dernière plage qui contient le texte Prix ?

ps La méthode lastChild renvoie le dernier enfant dans le sélecteur sélectionné, mais pas plus!

javascript jquery html jquery-selectors

0 commentaires

4 Réponses :

2
votes

Sélectionnez tous les enfants de #content en utilisant le sélecteur * et utilisez .filter () pour filtrer l'élément. Dans le filtre de rappel, les éléments n'ont pas d'enfant.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div>
        <span>
            <b>
                <i>
                    <u>
                        <span>Price</span>
                    </u>
                </i>
            </b>
        </span>
    </div>
</div>

var ele = $("#content *").filter((i,v) => $("*", v).length == 0);
console.log(ele[0].outerHTML);

$("#content *").filter(function(){
  return $("*", this).length == 0;
});
// Or using ES6
$("#content *").filter((i,v) => $("*", v).length == 0);

0 commentaires

0
votes

Vous pouvez utiliser .find () : https://api.jquery.com/find/

Cela cherchera récursivement votre sélecteur, donc: $ ('# content'). find ('span') vous donnera deux travées, une pour la première étendue imbriquée et une pour la deuxième étendue imbriquée. L'inconvénient est que si vous avez plusieurs travées, vous devrez trouver la bonne.

Si vous pouvez mettre un identifiant dans le dernier, dites une classe nommée 'target-class', alors vous savez que vous trouverez le bon: $('#content').find('span.target-class');

1 commentaires

Span était à titre d'exemple, il peut y avoir des balises complètement différentes.

0
votes

Tout d'abord, corrigeons votre syntaxe. Vous ne pouvez pas mettre un directement dans un . Vous avez besoin d'un nœud

. De plus, vous ne pouvez / ne devriez pas mettre des éléments de bloc tels que ul dans des éléments en ligne (span, a, b, i ...). Et même et ne sont pas recommandés, mieux vaut utiliser un balisage sémantique tel que

 ou    à la place.  Maintenant, votre problème. Je pense que vous n'avez pas à vous soucier d'être le dernier nœud. Si vous savez que le texte contenu est "Prix", vous pouvez le rechercher de la manière suivante: 
  
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div>
        <u>
          <li>
              <span>Price</span>
          </li>
        </u>
    </div>
</div>
.highlighted {
background-color: red;
}
var selector = $('#content').find(":contains('Price')");
$(selector).addClass('highlighted');

  Si cette solution ne correspond pas à vos besoins, pour obtenir le dernier nœud, vous devez tous vérifier s'ils ont des enfants ou non. Une fois qu'ils ne le font pas, vous avez atteint votre objectif.
Mais je dois dire que c'est une solution que vous auriez pu trouver dans SO.
 Sélectionnez l'enfant le plus profond dans jQuery

4 commentaires

1. Balises que j'ai saisies arbitrairement par exemple 2. Je ne connais pas le texte à l'intérieur des balises, il peut y en avoir. Ma tâche est de remplacer le texte et de sauvegarder quelque part toute la chaîne de balises.

Bien, mais pensez que nous allons utiliser votre code pour résoudre votre problème. Une erreur de syntaxe peut provoquer la rupture du code. Vous devez prendre soin de la syntaxe pour nous faire gagner du temps pour la réparer. C'est tout. J'espère que tu as compris.

2. C'est pourquoi je vous ai donné deux réponses.

Oui, merci pour le commentaire, je considérerai les erreurs de syntaxe la prochaine fois.

0
votes

Jquery Way - Vous pouvez cibler tous les intervalles $ () et cibler le dernier intervalle en utilisant slice () .

$ ('# content span'). slice (-1) [0];

Méthode Javascript - Trouvez toutes les travées en utilisant querySelectorAll () , You ' d obtenir un NodeArray, vous pouvez le convertir en Array en utilisant Array.from () et slice () dernier élément de celui-ci qui est le dernier span.

Array.from (document.querySelectorAll ('# content span')). slice (-1) [0]

1 commentaires

Je ne sais pas que la dernière balise sera span