jQuery - html字符串上的选择器

Question

我将从一个带有jQuery的html字符串中获取一个元素,但我总是在我的控制台中得到一个未定义的元素.我的字符串是:

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

我想获得td.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);

还有一些,但没有任何作用:/

有谁知道我的问题的解决方案？

Answer 1

首先,用于jQuery.parseHTML将HTML解析为元素数组; 那么你将能够将它转换为jQuery集合并用于filter将集合限制为与选择器匹配的元素.

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

您不能在这样的节点集合上使用 jQuery 选择器。您可以包装在单个节点中以解决此问题，因此只需添加例如包装<tr>节点。

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

然后它会起作用：

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

JSFiddle（记得查看控制台查看日志）。