Изучаем Java

Вы здесь: Главная >> Jquery-учебник >> Добавление элементов в jQuery и их фильтрация

Добавление элементов в jQuery и их фильтрация


Добавление и фильтрация элементов

Итак, мы уже довольно многое узнали о jQuery . В этом разделе мы познакомимся с тем, как изменять коллекцию элементов в jQuery.

Библиотека jQuery позволяет не только получать коллекцию элементов, а затем манипулировать ими, но и изменять эту первоначальную коллекцию в любой момент времени. Множество методов предоставляют возможность добавления новых элементов, фильтрации элементов, а также передвижения по дереву DOM. Рассмотрим эти методы подробно.

Для добавления и фильтрации элементов коллекции предназначены следующие методы.

1)  add ( Выражение) — добавляет элементы в коллекцию. В качестве параметра можно указать HTML-элемент, селектор, коллекцию DOM-элементов или объект jQuery. Возвращает новую коллекцию элементов. Создадим элемент, затем добавим к нему новый HTML-элемент и выведем полученную коллекцию в конец содержимого всех тегов div.

$ ("<span>Teкст</span>") .add("<b>Новый элемент</b>") .appendTo("div");

Найдем коллекцию всех тегов span, добавим к ним элемент с идентификатором divl, а затем выведем текст во всех элементах коллекции.

$("span").add("#divl").html("Новый текст");

Передадим коллекцию DOM-элементов и объект jQuery.

$("span").add($("div").get()).html("Новый текст"); // DOM

$("span") .add($("div")) .html("Новый текст"); // jQuery

2) not (Параметр) — позволяет удалить определенные элементы из коллекции. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или объект jQuery. Получим коллекцию всех тегов div, удалим из коллекции элемент с идентификатором divl, а затем выделим оставшиеся элементы коллекции.

$("div").not("#divl").css("background-color", "red");

Удалим из коллекции первый элемент, передав в качестве параметра DOM-элемент.

$("div").not($("div:first").get(0)) .css("background-color", "red");

Теперь исключим из коллекции все четные элементы, передав массив DOM-элементов.

$("div") .not ($ ("div:even") .get () ) .css("background-color", "red");

Такого же результата можно достичь, если передать объект jQuery.

$ ("div") .not ($ ("div:even") ) .css("background-color", "red");

3) filter () — позволяет ограничить коллекцию дополнительным условием. В отличие от метода not (), не удаляет элементы, соответствующие селектору, а наоборот, оставляет только их. Метод имеет два формата.

filter(Селектор)

filter(Функция обратного вызова)

В первом формате метода передается селектор. Для примера выделим элемент с определенным идентификатором.

$("div").filter("#divl").css("background-color", "red");

Второй формат метода позволяет ограничить набор произвольным условием. В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.

function <Название функции>([<Индекс>] )   {...}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание, указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр Индекс. Чтобы оставить элемент в наборе, необходимо в функции обратного вызова вернуть значение true. Выделим ссылку с определенным текстом.

$("а") .css("color",   "silver")
     .filter(function()   {
if   (this.innerHTML == "Ссылка 2")   {
  return true;
}
}).css("color",   "red");

 

Привязка поиска к другим элементам

Привязать поиск элемента к другим элементам HTML-документа можно с помощью следующих методов.

1) find (Селектор) — находит элементы, которые располагаются внутри контейнера. Возвращает новую коллекцию. Найдем все теги div, затем внутри них все теги span и изменим текст внутри этих тегов.

$("div").find("span").html("Новый текст");
<div>
<u><span>TeKCT l</span></u> <span>TeKCT 2</span>
</div>

2) children( [Селектор] ) — возвращает все дочерние узлы. Выделим все элементы внутри тегов div.

$("div").children().css("color",   "red");
<div>
<u><b>Выделенный</b> текст l</u>
<b>Текст 2</b>
</div>

В результате будет выделен текст, который расположен между тегами u и b.

Если в качестве необязательного параметра указать селектор, то будут возвращены дочерние узлы, которые соответствуют селектору.

$("div").children("b").css("color",   "red");
<div>
<u><b>Выделенный</b> текст l</u>
<b>Текст 2</b>
</div>

В этом примере будет выделен только фрагмент Текст 2, так как второй тег b расположен внутри тега u.

3) parent ( [Селектор] ) — находит контейнер, в который вложен элемент. Получим любые теги, в которые вложены теги span, и выведем новый текст вместо их содержимого.

$("span").parent().html("Это элемент-родитель");
<div><span>текст</span></div>
<b><span>текст</span></b>
<b><u>текст</u></b>

Результат:

<div>Этo элемент-родитель</div > <b>Это элемент-родитель</b> <b><u>текст</u></b>

Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Найдем все теги div, в которые вложены теги span, и выведем новый текст вместо их содержимого.

$("span").parent("div").html("Это элемент-родитель");
<div><span> Текст </span></div>
<b><span> Текст </span></b>
<b><u>Текст</u></b>

Результат будет выглядеть следующим образом.

<div>Это элемент-родитель</М^>
<b><span> Текст </span></b>
<b><u>Текст</u></b>

При щелчке на кнопке отобразим скрытый элемент, который находится в одном контейнере с ней, а затем удалим эту кнопку.

$(":button").click(function()   {
    $(this)  // Находим элемент .parent()  // Получаем элемент-родитель
.find("span:first")   // Находим первый тег
.show()   // Отображаем его
.end()  // Возвращаемся к элементу-родителю
.find(":button:first") // Находим внутри него первую кнопку
.remove();  // Удаляем кнопку
});
<div>
<input type="button" value="Показать описание"> Термин l<br>
<span style="display:none">Описание термина l</span> </div> <div>
<input type="button" value="Показать описание"> Термин 2<br>
<span style="display:none">Описание термина 2</span> </div>

4) closest {Селектор) — возвращает ближайший родительский элемент, который соответствует селектору.

$("#spanl").closest("div").html("Это элемент-родитель");
<div><div><b>
<span id="spanl">Текст</sраn> </b></div></div>
Результат:
<div><div>Это элемент-родитель</с11у></с11у>

5) parents ( [Селектор] ) — возвращает все контейнеры, в которые вложен элемент. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все теги, в которые вложен элемент с идентификатором spanl, и выведем их названия.

var elem = $("#divl");
$("#spanl").parents().each(function()   {
  elem.append(this.tagName + "  ");
});
<div><u><b>
<span id="spanl">Текст</sраn>
</b></u></div>
<div id="divl" ></div>


Результат:
b u div

6) siblings ( [Селектор] ) — находит все узлы, которые расположены до или после элемента на одном уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют.

$("div").siblings("а").css("color",   "red");
<a href =" linkl. html" >Ссылка l</a><br>
<span> Текст </span><br> <div> Текст </div>
<span> Текст </span><br>
<a href ="link2 .html" >Ссылка 2</a><br>
<span><a href =" link3 . html" >Ссылка 3</a></span><br>
<a href =" link4 . html" >Ссылка 4</a><br>

Цвет текста ссылки станет красным, если тег а следует до или после тега div. В этом примере ссылки 1, 2 и 4 станут красного цвета. Ссылка 3 не станет красного цвета, так как расположена внутри тега span.

7) next ( [Селектор] ) — находит узел, который является соседним для элемента и следует сразу после него. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Выделим содержимое тега, который следует сразу за элементом с идентификатором spanl.

$("#spanl") .next() .css("color",   "red") ;
<span id="spanl"> Текст </span>
<b>Текст1</b>
<u><b>Текст2</b></u>

В результате будет выделен фрагмент Текст 1.

8) next All ( [Селектор] ) — возвращает все узлы, которые следуют после элемента на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все названия тегов, которые следуют после элемента с идентификатором spanl.

var elem = $("#divl");
$ ("#spanl") .nextAlK) . each (function ()   {
  elem.append(this.tagName + "  ");
});
<span id="spanl">TeKCT</span>
<b>Текст</b> <u><b>Текст</b></u>
<div id="divl" ></div>

Результат:
b u div

Обратите внимание: мы не получили второй тег b, так как он расположен внутри тега u.

9) prev( [Селектор] ) — находит узел, который является соседним для элемента и находится сразу перед ним. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Выделим содержимое тега, который находится перед элементом с идентификатором spanl.

$(M#spanl").prev().css("color",   "red");
<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="spanl">Текст</sраn>

В результате будет выделен фрагмент Текст 1.

10) prevAll ( [Селектор] ) — возвращает все узлы, которые находятся перед элементом на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены узлы, которые ему соответствуют. Получим все названия тегов, которые находятся перед элементом с идентификатором spanl.

var elem =. $(n#divlM);
$("#spanl") .prevAHO . each (function ()   {
  elem. append (this . tagName + 11 ");
});
<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="spanl"> Текст </span>
<div id="divl" ></div>

Результат:
b u

Обратите внимание: мы не получили первый тег b, так как он расположен внутри тега u.

11) contents () — находит дочерние узлы (включая текстовые) в коллекции элементов или в содержимом документа, если он представляет собой фрейм. Переместим все текстовые узлы в конец элемента с идентификатором divl.

$(HdivH).contents().not(M[nodeType=l]").appendTo("#divl");
<div>Текстовый узел1 <b>узел элемента</b>
Текстовый узел2<"^гу>
<div id="divl"></div>

12) andSelf () — объединяет предыдущую коллекцию с новой. $("div") .children ("а") // Объединяем коллекцию тегов
// с коллекцией тегов <а>, являющихся // дочерними элементами тегов
.andSelf() .css({Mborder-styleM: "dotted", margin: "20px"});

Ссылка l

Ссылка 2

Ссылка 3

Ссылка 4

В этом примере содержимое тега div, а также ссылки 1, 2 и 4 будут обведены пунктирной рамкой. Ссылка 3 не будет обведена, так как расположена внутри те-га span.

13) end () — позволяет вернуться к предыдущей коллекции. В качестве примера получим коллекцию всех тегов div, внутри которой найдем элемент с идентификатором spanl и выведем в нем соответствующий текст. Затем вернемся к предыдущей коллекции всех тегов div, в которой найдем элемент с идентификатором span2 и также выведем в нем соответствующий текст.

$("div")
//Находим элемент с id="spanl"
.find("#spanl").html("Это spanl")
// Возвращаемся на предыдущую коллекцию
.end()
//Находим элемент с id="span2"
.find("#span2").html("Это span2");

14) is (Селектор) — проверяет коллекцию или элемент на соответствие селектору. В качестве параметра нельзя указывать сложносоставные селекторы (например, условия +, ~, и больше). Возвращает true, если элемент соответствует селектору, и false— в противном случае. Выведем подтверждающее сообщение, если элемент с идентификатором linkl расположен внутри тега div, а в противном случае — название тега, в который вложен элемент.

var elem = $("#linkl").parent();
if  (elem.is("div"))   {
alert("Элемент вложен в тег <div>");
}
else {
alert("Элемент вложен в тег " + elem[0].tagName);
}

Метод map()

Метод map () позволяет создать новую коллекцию элементов jQuery на основе имеющегося набора. Имеет следующий синтаксис. mаp{Функция обратного вызова);

В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции ( [Индекс [, BОМ-элемент] ] ) {
// ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание, указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре ВОМ-элемент указана переменная, то текущий элемент также будет доступен через эту переменную. Текущий индекс элемента в коллекции доступен через параметр Индекc. Выделим все четные ссылки в документе.

$("а").map(function(ind,  elem)   {
    if  (ind%2 == 0)   {
       return elem;
}
else {
return null;
}
}).css("color",  "red");

Чтобы добавить текущий элемент в новый набор, необходимо вернуть его внутри функции обратного вызова. Добавить можно сразу несколько элементов, вернув их как массив. Если в качестве значения вернуть null, то элемент не будет добавлен в новую коллекцию.

В листинге 3.1 мы получали URL-адреса всех ссылок в документе с помощью метода each (). Переделаем наш пример и используем для этой цели метод mар () .

var links = $("а").тар(function(){
return $(this).attr("href"); }).get().join(",");
$(»#divl").text(1inks);

Как видно из примера, мы можем создавать коллекцию не только элементов, но и значений. Преобразовать эту коллекцию в обычный массив позволяет метод get (). С помощью метода JavaScript join() преобразуем массив в строку, где все элементы массива будут перечислены через запятую.

В качестве еще одного примера использования метода mар () выделим все ссылки с определенным текстом (листинг 4.1).

Листинг 4.1.
Выделение ссылок в зависимости от текста

<html>
<head>
<title>Функция map()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("a").map(function() {
      var txt = $(this).text();
      if (txt == "Ссылка 1" || txt == "Ссылка 3") {
         return this;
      }
      else {
         return null; // Удаляем элемент
      }
   }).css("color", "red");
});
</script>
</head>
<body>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
<a href="link4.html">Ссылка 4</a>
</body>
</html>

В этом примере будут выделены все ссылки, содержащие текст Ссылка 1 и Ссылка 3.


Партнеры сайта