selezionare la classe di html grezzo

Question

$(function() { 
    myhtml = '<tr><td>1</td><td>Orange</td><td>1799.00 x <span>1</span></td><td>0.00</td><td>1799.00</td></tr><tr class="shippingRow"><td></td><td></td><td></td><td>Shipping</td><td>2.00</td></tr><tr class="totalRow"><td></td><td></td><td></td><td><strong>Total</strong></td><td><strong>1811.00</strong></td></tr>' 
    console.log($(myhtml).find('.shippingRow td').length); 
}); 

Ho ottenuto zero invece di uno, quale parte ho perso? Voglio rimuovere il nome della classe o fare un po 'di stile su myhtml.

Answer 1

Il numero .shippingRow non è nidificato in nessun altro elemento della stringa HTML. Ciò significa che è uno degli elementi nell'oggetto jQuery restituito. (Ad esempio, dal momento che hai 3 tr, $(myhtml).length restituirà 3).

Poiché .find cerca solo i discendenti discendenti degli elementi nell'oggetto jQuery, non trova alcun elemento con la classe shippingRow.

Un metodo è quello di utilizzare .filter invece:

$(myhtml).filter(".shippingRow").find("td").length 

Answer 2

Prova ad aggiungere <table><tbody> all'inizio del myhtml, </tbody></table> alla chiusura delle myhtml, vedere Finding element in jquery ajax html answer

myhtml = '<table><tbody><tr><td>1</td><td>Orange</td><td>1799.00 x <span>1</span></td><td>0.00</td><td>1799.00</td></tr><tr class="shippingRow"><td></td><td></td><td></td><td>Shipping</td><td>2.00</td></tr><tr class="totalRow"><td></td><td></td><td></td><td><strong>Total</strong></td><td><strong>1811.00</strong></td></tr></tbody></table>'; 
 

 
console.log($(myhtml).find('.shippingRow td').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

Ele sarà una parte del DOM solo se è aggiunta solo nel documento.

L'esempio è solo una stringa, è necessario inserire tale stringa in documento per essere un DOM valido.

Si può fare in questo modo:

var myhtml='<tr><td>1</td><td>Orange</td><td>1799.00 x <span>1</span></td><td>0.00</td><td>1799.00</td></tr><tr class="shippingRow"><td></td><td></td><td></td><td>Shipping</td><td>2.00</td></tr><tr class="totalRow"><td></td><td></td><td></td><td><strong>Total</strong></td><td><strong>1811.00</strong></td></tr>'; 
var fragment = document.createDocumentFragment(); 
var span= document.createElement("span"); 
$(span).append(myhtml); 
fragment.appendChild(span); 
console.log($(span).find('.shippingRow td').length); 

ho usato frammento di documento in modo che il codice HTML non sarà una parte dell'albero DOM, ma può ancora essere accessibili tramite JavaScript. Leggi qui: https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

I DocumentFragments sono nodi DOM. Non fanno mai parte dell'albero principale DOM . Il solito caso d'uso è creare il frammento del documento, aggiungere gli elementi al frammento del documento e quindi aggiungere il frammento del documento all'albero DOM. Nell'albero DOM, il frammento del documento è sostituito da tutti i suoi figli.

FIDDLE: filtro http://jsfiddle.net/0oxdqdot/