J'essaie de trouver des éléments qui ont une classe. J'utilise le code suivant. Pourquoi ça ne marche pas ? Comment puis-je le faire fonctionner?

$('<div/>').html("<div class=\"markdown\"></div>").contents().find(".markdown")

J'essaie d'obtenir tous les éléments avec la classe Markdown dans la chaîne.

1
Suresh Subedi 17 mars 2019 à 15:13

2 réponses

Meilleure réponse

Sans contenu, vous pouvez obtenir un élément .markdown comme celui-ci :

$('<div/>').html("<div class=\"markdown\"></div>").find('.markdown')

Les contenus obtiennent les enfants de chaque élément dans l'ensemble d'éléments correspondants, y compris les nœuds de texte et de commentaire. (https://api.jquery.com/contents/)

let markdownElement = $('<div/>').html("<div class=\"markdown\"></div>").find(".markdown");

console.log(markdownElement[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
4
TheBosti 17 mars 2019 à 12:26

contents renvoie le contenu de l'élément que vous l'appelez au. find ne regarde que les enfants et autres descendants, mais dans votre cas, contents renvoie le div.markdown réel (car c'est le contenu de la div wrapper).

Si votre point de départ est la div wrapper, utilisez simplement find comme indiqué dans cette réponse.

Si votre point de départ est le contenu du wrapper div (je suppose que vous avez utilisé contents pour une raison dans votre exemple), pour le trouver dans ce cas, vous devez utilisez filter, pas find :

const result = $('<div/>').html("<div class=\"markdown\"></div>").contents().filter(".markdown");
console.log(result[0].outerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

S'il peut ou non être au niveau supérieur, vous pouvez utiliser une combinaison :

const contents1 = $('<div/>').html("<div class=\"markdown\">top level</div>").contents();
const contents2 = $('<div/>').html("<div><div class=\"markdown\">nested</div></div>").contents();

const results1 = contents1.filter(".markdown").add(contents1.find(".markdown"));
console.log(results1[0].outerHTML); // 1

const results2 = contents2.filter(".markdown").add(contents2.find(".markdown"));
console.log(results2[0].outerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3
T.J. Crowder 17 mars 2019 à 12:35