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

尝试：

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

要么：

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

Answer 3

你不能在像这样的节点集合上使用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（记得查看控制台以查看日志）。

Answer 4

我有一个以下形式的回复：

<div>...
</div>

<div>...
</div>

<div>...
</div>

而@minitech的方法导致了一系列HTML节点，其中选择器不起作用。

所以我尝试了这个并且效果很好：

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