Поиск по сайту:

Пример функций обхода дерева jQuery parent() и children()


jQuery предоставляет множество функций обхода дерева, которые мы можем использовать для получения родительского, дочернего элементов, братьев и сестер, предыдущего и следующего элементов. Мы рассмотрим каждый из методов обхода дерева jQuery один за другим — сегодня мы рассмотрим два метода обхода jQuery, т. е. parent() и children().

родительская функция jQuery()

Метод jQuery parent() используется для получения прямого родительского элемента выбранного элемента HTML. Вы можете выполнять желаемые действия над родительским элементом после его возврата. Это синтаксис для использования jQuery parent():

  • $ (дочерний элемент).parent()

Это вернет прямой родительский элемент parent.

  • $ (дочерний элемент).parent(\фильтр)

Фильтр — это необязательный параметр, передаваемый методу parent().

Пример функции jQuery parent()

Следующий пример демонстрирует использование метода parent(). jquery-parent.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery Traversing Parent</title>

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
  $("h4").parent().css("background-color","yellow");
});
</script>
</head>
<body>

<span id="spanParent">Span Element - Parent of h4 element
<h4>This is an h4 element - child of Span.</h4>
</span>

</body>
</html>

jQuery-функция детей()

Метод jQuery children() используется для получения прямых дочерних элементов выбранного элемента HTML. Вы можете использовать метод children() для обхода дочерних элементов выбранного родительского элемента. С помощью этого метода вы можете выполнять желаемые действия с дочерними элементами, такие как изменение цвета фона, включение, отключение, скрытие, отображение и т. д. Это синтаксис для использования функции jQuery Children():

  • $(parentElement).children()

Используется без каких-либо параметров. Это используется для возврата всех прямых дочерних элементов parentElement.

  • $(parentElement).children(childElement)

parentElement и childElement могут быть любым элементом HTML. Это вернет все совпадающие childElement parentElement >Параметр childElement в этом методе является необязательным, что обеспечивает дополнительную возможность фильтрации для получения дочерних элементов.

Пример функции jQuery Children()

Следующий пример демонстрирует использование метода children(). jquery-children.html

<html>
<head>
<title>jQuery Traversing Children</title>

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
  //below code will run for all divs
  $("div").children("p").css("background-color","yellow");

   $("#spanParent").children("h4").css("background-color","green");
});
</script>
</head>
<body>

<div style="border:1px solid;">
<h3>h3 - Child of div</h3>
<p> p -Child of div</p>
<span> Span - Child of Div</span>
<p>Second p - Child of div</p>
</div>
<p> p element - Not a child of div</p>

<span id="spanParent">
<h4>This is an h4 element (child of Span).</h4>
</span>

</body>
</html>