jquery 后代元素_在jQuery中查找元素的所有后代

最新推荐文章于 2021-08-04 08:53:46 发布

cunchi4221

最新推荐文章于 2021-08-04 08:53:46 发布

阅读量2.5k

点赞数

文章标签： js css jquery javascript html ViewUI

原文链接：https://www.journaldev.com/5342/find-descendants-element-jquery

版权

jquery 后代元素

In this post, we are going to discuss about an important jQuery traversing method to find all the descendents of an element. jQuery API provides find() method to carry out this task.

在本文中，我们将讨论一种重要的jQuery遍历方法，以查找元素的所有后代。 jQuery API提供了find()方法来执行此任务。

jQuery find（）方法 (jQuery find() method)

The jQuery find() method returns all the descendant elements like child, grandchild and so on. This method is used if you want to search all the elements deeper in the DOM tree. This method traverses downwards and finds all its descendants of the selected element. This method takes a mandatory filtering parameter to narrow down the search.

jQuery find（）方法返回所有后代元素，例如child，孙子等等。如果要搜索DOM树中更深的所有元素，则使用此方法。此方法向下遍历并找到所选元素的所有后代。此方法采用强制性的过滤参数来缩小搜索范围。

Here is the general syntax for using find() method:

这是使用find（）方法的一般语法：

selector.find(filter)
选择器。查找（过滤器）

filter is the mandatory parameter passed to the find() method. filter could be any string selector expression, an element or a jQuery object.

filter是传递给find（）方法的必需参数。 filter可以是任何字符串选择器表达式，元素或jQuery对象。

jQuery find（）示例 (jQuery find() example)

Following example demonstrates the jQuery find() method usage.

以下示例演示了jQuery find（）方法的用法。

<!doctype html>
<html>
<head>
<title>jQuery Traversing find</title>
<style>
    .highlight{
       background: yellow;
     }
 
    div{
      display: block;
      border: 3px solid black;
      color: black;
      padding: 5px;
      margin: 25px;
      width:250px;
     }
    span{
      display: block;
      border: 3px solid green;
      color: black;
      padding: 5px;
      margin: 25px;
      width:200px;
     }
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>jQuery find() demo</h2>
<div>div
<p> p - I am div's child</p>
<span>span <p>p - I am span's Child and div's Grand Child</p></span>
</div>
<script>
$( "div" ).find( "p" ).addClass("highlight");
</script>
</body>
</html>

In this example, you can see two p elements, one element is div element’s child and the other one is it’s grandchild. The find() method finds all the p element of the selected div element and changes the color to red. Below image shows the output produced by above HTML page.

在此示例中，您可以看到两个p元素，一个元素是div元素的子元素，另一个元素是其孙子元素。 find（）方法查找所选div元素的所有p元素，并将颜色更改为红色。下图显示了以上HTML页面产生的输出。

You can use selector.find("*") to find all the descendants of the HTML document.

您可以使用selector.find("*")查找HTML文档的所有后代。

That’s all for now and you can find more traversing methods in the coming posts.

到此为止，您可以在以后的文章中找到更多的遍历方法。