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
    });
複製代碼