jQuery - selettori su una stringa html

Question

Ho intenzione di ottenere un elemento da una stringa html con jQuery, ma ottengo sempre un indefinito nella mia console. mio String è:

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

e voglio ottenere il td.test.

ho provato:

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); 

e un po 'di più, ma non funziona niente:/

Qualcuno sa una soluzione per il mio problema?

Answer 1

Innanzitutto, utilizzare jQuery.parseHTML per analizzare l'HTML in un array di elementi; quindi potrai convertirlo in una raccolta jQuery e utilizzare filter per limitare la raccolta agli elementi che corrispondono a un selettore.

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>

Answer 2

Prova:

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

o:

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

Answer 3

ho una risposta che ha la forma:

<div>... 
</div> 

<div>... 
</div> 

<div>... 
</div> 

E il metodo di @minitech ha generato una serie di nodi HTML in cui il selettore non funzionava.

Così ho provato questo e ha funzionato bello:

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

Answer 4

Non è possibile utilizzare selettori jQuery su un insieme di nodi come questo. Puoi racchiudere un singolo nodo per ovviare a questo problema, quindi aggiungi semplicemente ad es. un nodo di fasciatura <tr>.

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

E allora funzionerà:

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

JSFiddle (ricordarsi di visualizzare la console per visualizzare il registro).