选择原始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);
});

我得到了零而不是一，我错过了哪个部分？我想要移除类名或对我的HTML进行一些样式处理。

- Alice Xu

Answer 1

.shippingRow tr元素在你的HTML字符串中未嵌套在任何其他元素内。这意味着它是jQuery对象返回的元素之一。（即，由于您有3个tr，$(myhtml).length将返回3）。

由于.find只搜索jQuery对象中元素的后代，因此它无法找到任何带有类shippingRow的元素。

一种方法是使用.filter代替：

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

- Stryner

---

过滤比查找慢，对吧？也许我应该正确地包装标签。 - Alice Xu

@AliceXu 我认为在这种情况下，性能差异可能是可以忽略不计的。通常很难衡量性能，因为不同的浏览器表现不同。这些操作仅在一小组元素上调用。创建元素以正确包装它甚至可能抵消任何潜在的性能提升。 - Stryner

我刚发现我无法操作它。$(myhtml).filter(".shippingRow").find("td").attr('style','padding:10px'); <-- 无效。 - Alice Xu

Answer 2

尝试在myhtml开头添加<table><tbody>，在myhtml结尾处添加</tbody></table>，请参见查找 jQuery ajax html 答案中的元素。

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>

- guest271314

Answer 3

只有在元素被附加到文档中时，它才会成为DOM的一部分。

您的示例只是一个字符串，您需要将该字符串放入文档中才能成为有效的DOM。

您可以这样做：

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

我使用文档片段，这样你的HTML就不会成为DOM树的一部分，但仍然可以通过JavaScript访问。请阅读此处：https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment 文档片段是DOM节点。它们永远不是主DOM树的一部分。通常的用法是创建文档片段，将元素附加到文档片段中，然后将文档片段附加到DOM树中。在DOM树中，文档片段被其所有子节点替换。

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

- VMcreator