select class of raw html

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

I got zero instead of one, which part I missed out? I want to remove the class name or do some styling to myhtml.

Answer 1

The .shippingRow tr is not nested inside any other element in your HTML string. This means that it is one of the elements in the jQuery object that it returns. (i.e., since you have 3 tr's, $(myhtml).length will return 3).

Since .find only searches descendants of the elements in the jQuery object, it doesn't find any element with the class shippingRow.

One method is to use .filter instead:

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

Answer 2

Try adding <table><tbody> at beginning of myhtml , </tbody></table> at close of myhtml , see 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>