jQuery 遍历 - children() 方法 获取指定id下子元素的值



红色





$("#Aobj_2_2").children("span").text();
$("#Aobj_2_2").children("i").attr("title");

实例

找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色:

$("div").children(".selected").css("color", "blue");
DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<style>
  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
style>
head>
<body>
  <div>
    <span>Hellospan>
    <p class="selected">Hello Againp>
    <div class="selected">And Againdiv>

    <p>And One Last Timep>
  div>
<script>$("div").children(".selected").css("color", "blue");script>
body>
html>

 

定义和用法

add() 方法返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤。

.children(selector)

参数            描述
selector    字符串值,包含匹配元素的选择器表达式。

详细说明

如果给定表示 DOM 元素集合的 jQuery 对象,.children() 方法允许我们检索 DOM 树中的这些元素,并用匹配元素构造新的 jQuery 对象。.find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。

请注意,与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。

该方法接受一个选择器表达式作为可选参数,与我们传递到 $() 的参数的类型是相同的。如果应用该选择器,将测试元素是否匹配该表达式,以此筛选这些元素。

请思考这个带有基础的嵌套列表的页面:

  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
head>
<body>
<ul class="level-1">
  <li class="item-i">Ili>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">Ali>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1li>
          <li class="item-2">2li>
          <li class="item-3">3li>
        ul>
      li>
      <li class="item-c">Cli>
    ul>
  li>
  <li class="item-iii">IIIli>
ul>
<script>$('ul.level-2').children().css('background-color', 'red');script>
body>
html>

 

如果我们从 level-2 列表开始,我们可以找到它的子元素:

$('ul.level-2').children().css('background-color', 'red');

这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。

转载于:https://www.cnblogs.com/jiuge/p/4728861.html

你可能感兴趣的:(jQuery 遍历 - children() 方法 获取指定id下子元素的值)