JQuery: как получить div по имени класса из данных HTML без корневого элемента

Question

У меня есть такие HTML-данные:

<div class="class1">...</div>
<div class="class1 class2">...</div>
<div class="class3">...</div>
...
<div class="class1">...</div>
<div class="class1 class2">...</div>
<div class="class3">...</div>

Как я могу получить div с class1 и затем div с class2?

Я пробовал так:

var divs = $(data).find('.class1');

Но он вернул пустой массив.

Я пробовал другой способ:

var divs = $(data).filter('.class1');

Но вернул массив

[div.class1, div.class1, ..., div.class1]. 

Итак, я не смог найти div с 'class2', потому что 'class2' был потерян ... Это так странно ...

У кого-нибудь есть идеи? Спасибо!

Answer 1

Когда вы вызываете filter для коллекции, вы получаете только те элементы, которые соответствуют этому фильтру. Однако оригинальная коллекция не изменяется.

Все, что вам нужно сделать, это сохранить исходную коллекцию в переменной и обратиться к ней, если вы хотите выполнить фильтрацию по .class2:

var all = $(data),
    class1 = all.filter('.class1'),
    class2 = all.filter('.class2');

Answer 2

$("div[class*='class1']");

Чтобы проверить, запустите этот код:

var divs = $("div[class*='class1']");

divs.each(function() {
    alert($(this).text());
});

Answer 3

Причина, по которой find не сработала, вероятно, заключается в том, что ваша HTML-строка не имеет корневого элемента, поэтому поиск выполняется внутри каждого элемента.Если вы обернули HTML-код внутри содержащего элемента, find должно работать.