it-roy-ru.com

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

Я собираюсь получить элемент из 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);

и еще немного, но ничего не работает: /

Кто-нибудь знает решение моей проблемы?

30
MaxiNet

Во-первых, используйте 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>

53
Ry-

Пытаться:

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());
4
J. Bruni

Вы не можете использовать селекторы 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 (не забудьте просмотреть консоль, чтобы увидеть журнал).

1
Charles Goodwin

У меня есть ответ, который имеет форму:

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