jQuery позволяет легко удалять узлы из DOM. Но как вы удаляете элементы DOM из данного объекта jQuery?
Удалить элементы DOM из объекта jQuery
Ответ 1
Если вы говорите об удалении узлов из объекта jQuery, используйте функции filter
или not
. Подробнее см. здесь.
Как использовать filter
:
var ps = $('p');
//Removes all elements from the set of matched elements that do
//not match the specified function.
ps = ps.filter(function() {
//return true to keep it, false to discard it
//the logic is up to you.
});
или
var ps = $('p');
//Removes all elements from the set of matched elements that
//do not match the specified expression(s).
ps = ps.filter('.selector');
Как использовать not
:
var ps = $('p');
//Removes elements matching the specified expression
//from the set of matched elements.
ps = ps.not('.selector');
Ответ 2
Как уже отмечалось, $.filter()
- отличный вариант для фильтрации данных. Также обратите внимание, что объект jQuery может обрабатываться как массив, и как таковой вы можете использовать методы массива, такие как splice()
на нем.
var people = $(".people");
people.splice(2,1); // Remove 1 item starting from index 2
Ответ 3
<ul>
<li class="1" />
<li class="2" />
<li class="3" />
<li class="4" />
<li class="5" />
</ul>
Фильтр выполняет итерацию по коллекции объектов jQuery. Для каждого из элементов: Return true
внутри filter()
, чтобы сохранить текущий элемент в коллекции объектов jQuery. Верните false
, чтобы удалить текущий объект из коллекции объектов jQuery.
$("li").filter(function ()
{
if (this.className == "1" || this.className == "2") return true;
return false;
});
В этом случае; анонимная функция, выполняемая filter()
, вернет true для элемента списка, который имеет класс 1 и/или 2, в свою очередь удаляя последние три элемента списка из коллекции объектов jQuery.
Практический пример:
<ul>
<li class="1" />
<li class="2" />
<li class="3" />
<li class="4" />
<li class="5" />
</ul>
Этот фрагмент добавляет класс ( "синий" ) в неупорядоченный список. Затем выделяются первые два списка. Затем прикрепляет обработчик кликов к первым двум элементам списка:
$(function ()
{
$("ul").addClass("blue").find("li").filter(function ()
{
if (this.className == "1" || this.className == "2") return true;
return false;
}).addClass("highlight").click(function ()
{
alert("I am highlighted!");
});
});