jQuery API之each、children、index的使用

each

• 参数：
  • function: 回调函数：函数参数为index, ele(DOM元素)
• 做用：
  1. 循环遍历jQ数组
• code：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
复制代码

// 给每一个li添加类名li-index和index
    $('li').each(function (index, ele) {
      $(ele)
        .text(index)
        .addClass('demo' + index)
    });
复制代码

children

• 参数：
  • selector字符串
• 做用：
  1. 获取jQ对象的孩子元素
• 说明：
  1. 无参数：获取全部孩子元素
  2. 有参数：获取符合selector的孩子元素
• code：

<div class="wrapper">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="demo1"></div>
  </div>
复制代码

// 获取ul元素的全部孩子元素
    console.log($('.wrapper').children()); // 执行结果：输出[ul, div.demo1, (忽略)prevObject: jQuery.fn.init(1)]
    // 获取ul元素中类名为demo1的孩子元素
    console.log($('.wrapper').children('.demo1')); // 执行结果：输出[div.demo1, (忽略)prevObject: jQuery.fn.init(1)]
复制代码

index：

• 参数：
  • jQ对象
• 做用：
  1. 获取指定对象在兄弟元素中的索引值
• 说明：
  1. 没有返回 -1
• code：

<div class="wrapper">
    <p>1</p>
    <div>2</div>
    <p>3</p>
    <div>4</div>
    <p>5</p>
    <div>6</div>
  </div>
复制代码

// 获取点击元素在全部兄弟元素中的索引值
    $('.wrapper').children().on('click', function (e) {
      console.log($(e.target).index());// 执行结果：输出0, 1, 2, 3, 4, 5
    });
    // 获取点击元素在p兄弟元素中的索引值
    $('.wrapper').children().on('click', function (e) {
      console.log($('p').index($(e.target)));// 执行结果：输出0, -1, 1, -1, 2, -1
    });
复制代码