jquery 遍历 children([expr])

最新推荐文章于 2022-05-15 15:16:21 发布
最新推荐文章于 2022-05-15 15:16:21 发布
阅读量619 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery HTML ViewUI

children([expr])

从当前匹配元素集合中得到各个元素第一层子集集合，形成新的元素集合。返回匹配元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });

  });
  </script>
  <style>
  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
        border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
        border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
  </style>
</head>
<body>
  <div id="container">
    <div>
      <p>This <span>is the <em>way</em> we</span> 
      write <em>the</em> demo,</p>
    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write 
      the</button> demo,
    </div>
    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>
      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
    </p>
  </div>
</body>
</html>

 

var $kids = $(e.target).children();
将得到点击后匹配元素集合中第一层子集元素集合。

iteye_2604
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10-jQuery-遍历children、parent、for、each、for...of等
记录java学习日常~
05-24 913
上述代码表示：通过 $ 函数选择 container 元素，并使用 children() 方法获取它的所有子元素。然后使用 for...of 循环遍历所有子元素，并打印出它们的文本内容。需要注意的是，for...of 循环中的 element 变量是 DOM 元素，需要使用 $ 函数将其转换成 jQuery 对象才能进行相关操作。上述代码表示：使用 $ 函数选择所有 li 元素，并使用 each() 方法遍历它们。在示例代码中，使用 console.log() 打印每个 li 元素的索引和文本内容。
jQuery遍历children()方法
qq_43742368的博客
05-26 1080
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="../jquery-1.10.2.min.js"></script> <script type="text/javas
jQuery children（）示例
一名可爱的技术搬运工
05-20 656
在jQuery中， children（）用于查找匹配元素的子元素，它仅向下移动一级 。 例如，三层深的div元素包含类名称“ child”和“ orphan”。 <div class="A1"> <div class="child">A1-1</div> <div class="child">A1-2</div> <...
jQuery后代（children方法）
scwMason的博客
08-14 1756
jQuery children() 方法 children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。 下面的例子返回每个 &lt;div&gt; 元素的所有直接子元素： 比如下面的例子： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &l..
jQuery--遍历节点之后代遍历（children()、find()、contents()）详解
吴声子夜歌的博客
10-02 1967
后代遍历 后代遍历又称向下遍历，常用的方法有children()、find()和contents()方法，通过向下遍历DOM树的方式来查找元素的后台元素。 1. children()方法： children()方法用于返回所匹配元素的直接子元素，并允许使用选择器进行筛选，其语法格式如下： $(selector).children([childSelector]) $(selector)：表示所...
jQuery中children()方法用法实例
12-03
在jQuery库中，`children()`方法是一个非常实用的工具，用于获取匹配元素集合中每个元素的所有直接子元素。这个方法不包括后代元素，只针对一级子节点进行操作，这一点与`find()`方法不同，`find()`可以遍历所有子孙...
jQuery帮助之筛选查找 children([expr])
10-28
4. **性能优化**：`children([expr])`比`find([expr])`更快，因为`children()`仅查找一级子元素，而`find()`则会遍历所有后代元素。在大型DOM树中，这种差异可能会显著影响页面的加载速度和性能。 5. **与其他方法...
jQuery筛选器children()案例详解(图文)
12-02
本文主要探讨的是jQuery中的一个筛选器——`children()`，它用于选取元素的直接子元素。`children()`方法允许我们根据特定条件筛选这些子元素，从而实现更加精确的操作。 首先，我们需要了解jQuery的选择器和筛选器...
jquery函数大全
07-02
- `children(expr)` 获取所有直接子元素。 - `contains(str)` 判断元素是否包含特定文本。 - `end()` 返回到调用前的状态。 - `filter(expression/filter)` 过滤集合，仅保留符合表达式的元素。 - `find(expr)`...
jquery的父、子、兄弟节点查找,节点的子节点循环方法
10-20
3. **jQuery.children(expr)**: 使用此方法可以找到所有直接子元素。如果提供expr，它会返回匹配该表达式的子元素。 4. **jQuery.contents()**: 这个方法返回元素内的所有内容，包括子元素和文本节点。 5. **...
基于jquery中children()与find()的区别介绍
12-08
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选。 .find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。 .find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children，我理解为儿子，只在儿子这一级遍历。看下例子： 代码如下:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示
遍历children_N叉树的层次遍历
weixin_30013029的博客
01-12 348
题目：力扣​leetcode-cn.com解题思路层次遍历这道题很容易想到广度优先遍历（BFS），但是课本上学的BFS并不是很适合此题，需要对层次遍历思想进行一定的改动，下面做个对比代码对比// 1.普通层次遍历思想 fun commonBfs(root: MultiTreeNode?) { val queue = LinkedList<MultiTreeNode?>...
jQuery遍历之children()方法
qq_37036642的博客
08-03 3505
jQuery遍历之children()方法 jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系） 理解节点查找关系： 1 代码
jQuery-6（遍历）
shanliyiyeren的博客
05-15 574
1、后代遍历 children() //只能查找指定元素的第一层子元素 $("#dc").children().css({border:"3px solid red",backgroundColor:"pink"}); find() //方法可用于查找指定元素的所有后代元素 //查找id=df下面所有后代元素 $("#df").find("*").css({border:"3px solid red",backgroundColor:"pink"}); //查找id=df下面所有<span&g
面试官：为什么data属性是一个函数而不是一个对象？
weixin_44475093的博客
12-08 495
一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象，也可以是一个函数constapp=newVue({ el:"#app",...
jquery中children()与find()用法区别详解
littleqqqqq的博客
06-29 8507
1.children()是一个筛选器，顾名思义就是筛选子元素，筛选那些符合条件的子元素。 完整的格式如下：.children(expr) 其中children是筛选器的名称，expr是表达式，所有选择器中的表达式都可以用在这，比如按标签名”div”,按类名”.class”,按序号”:first”等等，如果表达式为空，那么返回的是所有的孩子，返回的结果仍为jQuery对象。 jqu
jquery中的【children()与find()】、【html()与text()、val()】用法区别详解
weixin_42575028的博客
06-05 1068
一、jquery中children()与find()用法区别详解 1、children() 是一个筛选器，顾名思义就是筛选子元素，筛选那些符合条件的子元素。 jquery取索引使用eq函数。 eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。 经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。 2、f...
jQuery API之each、children、index的使用
weixin_34319640的博客
05-24 993
each 参数： function: 回调函数：函数参数为index, ele(DOM元素) 作用： 循环遍历jQ数组 code： <ul> <li></li> <li></li> <li></li> <li></li> <l...
jQuery 遍历 - children() 方法
weixin_34296641的博客
07-01 228
2019独角兽企业重金招聘Python工程师标准>>> ...
children([expr])
最新发布
05-15
在Tcl编程语言中，children([expr])函数用于返回当前Tcl解释器环境中指定窗口的所有子窗口的名称。该函数需要一个可选参数expr，表示要查询的窗口。如果省略该参数，将默认查询当前窗口的子窗口。函数返回一个列表，列表中的每个元素都是一个子窗口的名称。如果指定的窗口不存在子窗口，则返回一个空列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值