web-dev-qa-db-fra.com

jQuery - sélecteurs sur une chaîne html

Je vais obtenir un élément d'une chaîne HTML avec jQuery, mais j'obtiens toujours un indéfini dans ma console . Ma chaîne est:

<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>

et je veux obtenir le td.test.

J'ai testé:

console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').innerHTML);
console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').html());
console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').first().innerHTML);

et quelques autres, mais rien ne marche: /

Est-ce que quelqu'un connaît une solution à mon problème?

jqueryhtmlstringjquery-selectors
30
MaxiNet

Tout d'abord, utilisez jQuery.parseHTML pour analyser le code HTML dans un tableau d'éléments. vous pourrez ensuite le convertir en une collection jQuery et utiliser filter pour limiter la collection aux éléments correspondant à un sélecteur.

var html =
    '<td class="test">asd</td>' +
    '<td class="second">fgh</td>' +
    '<td class="last">jkl</td>';

var text = $($.parseHTML(html)).filter('.test').text();

console.log(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

53
Ry-

Essayer:

console.log($('<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').filter('.test').html());

ou:

console.log($('.test', '<table><td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td></table>').html());
4
J. Bruni

Vous ne pouvez pas utiliser les sélecteurs jQuery sur un ensemble de nœuds comme celui-ci. Vous pouvez envelopper un seul nœud pour contourner ce problème, il vous suffit donc d’ajouter par exemple un noeud d'emballage <tr>.

var htmlBits = '<tr>'
  + '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>'
  + '</tr>';

Et puis ça va marcher:

console.log($('.test', htmlBits).text()); // outputs 'asd'

JSFiddle (n'oubliez pas de regarder la console pour voir le journal).

1
Charles Goodwin

J'ai une réponse qui est de la forme:

<div>...
</div>

<div>...
</div>

<div>...
</div>

Et la méthode de @minitech a abouti à un tableau de nœuds HTML dans lequel le sélecteur ne fonctionnait pas.

Alors j'ai essayé cela et cela a fonctionné Nice :

$.ajax({
    url:
    success: function($data) {
         var $parsed_data = $('<div/>').append($data);
         var found = $parsed_data.find(".Selector");
         ...
    }
});
0
juanmf