Sharing tips on using jQuery sibling nodes-JS Tutorial-php.cn

Sharing tips on using jQuery sibling nodes

PHPz

Release： 2024-02-27 12:45:03

Original

618 people have browsed it

Sharing tips on using jQuery sibling nodes

jQuery is a popular JavaScript library that is widely used in web development. In the front-end development process, operations on DOM elements are often involved, and jQuery provides a wealth of methods to simplify these operations. This article will focus on the techniques for operating sibling nodes in jQuery, including specific usages such as finding sibling nodes and filtering sibling nodes. It will also be explained in detail with code examples.

1. Find sibling nodes

In jQuery, you can easily find adjacent sibling nodes by using the sibling selector. The sibling selector is simple and straightforward to use. You can easily locate the sibling nodes of the target element by using specific syntax. For example, the next sibling node and the previous sibling node can be selected by using the .next() and .prev() methods respectively.

// 选择下一个兄弟节点
$('selector').next();

// 选择上一个兄弟节点
$('selector').prev();

Copy after login

2. Filter specific types of sibling nodes

Sometimes we need to filter out specific types of sibling nodes based on specific conditions, which requires the use of the filtering method provided by jQuery. For example, we can use the .siblings() method to select all sibling nodes, and then add a selector to filter out the sibling nodes that meet the conditions.

// 筛选class为example的兄弟节点
$('selector').siblings('.example');

// 筛选具有特定属性的兄弟节点
$('selector').siblings('[data-type="value"]');

Copy after login

3. Manipulate the properties and content of sibling nodes

In addition to finding sibling nodes, we can also easily manipulate the properties and content of sibling nodes through jQuery. By using the .attr() method you can get or set the attribute value of a sibling node, while the .html() and .text() methods can get or set Set the HTML content and text content of sibling nodes.

// 获取兄弟节点的属性值
$('selector').next().attr('attributeName');

// 设置兄弟节点的属性值
$('selector').next().attr('attributeName', 'attributeValue');

// 获取兄弟节点的HTML内容
$('selector').next().html();

// 设置兄弟节点的HTML内容
$('selector').next().html('<p>New HTML content</p>');

// 获取兄弟节点的文本内容
$('selector').next().text();

// 设置兄弟节点的文本内容
$('selector').next().text('New text content');

Copy after login

4. Sample application: interactive expansion menu

The following is a simple example to demonstrate how to use sibling nodes to create an interactive expansion menu. When a menu item is clicked, the submenus under this menu item are expanded and the submenus under other menu items are collapsed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Dropdown Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<ul class="menu">
  <li class="menu-item">
    Menu 1
    <ul class="submenu">
      <li>Submenu 1</li>
      <li>Submenu 2</li>
    </ul>
  </li>
  <li class="menu-item">
    Menu 2
    <ul class="submenu">
      <li>Submenu 3</li>
      <li>Submenu 4</li>
    </ul>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.menu-item').click(function() {
  $(this).siblings().find('.submenu').slideUp();
  $(this).find('.submenu').slideToggle();
});
</script>
</body>
</html>

Copy after login

In the above example, when .menu-item is clicked, the submenus under other menu items will be collapsed and the submenus under the current menu item will be expanded, thereby achieving a The effect of interactively expanding the menu.

Through the above introduction, we have learned about some common techniques for sibling node operations in jQuery, and demonstrated how to actually apply these techniques through examples. In front-end development, mastering these skills can help developers operate DOM elements more efficiently and achieve more flexible and interactive page effects. Hope this article is helpful to you.

The above is the detailed content of Sharing tips on using jQuery sibling nodes. For more information, please follow other related articles on the PHP Chinese website!