jQuery - селекторы в HTML-строке

Question

Я собираюсь получить элемент из html-строки с помощью jQuery, но я всегда получаю неопределенное в моей консоли. Моя строка:

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