首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

jQuery 選擇器操作:為
  • 下第 2、3 個 批量賦值的實現代碼
  •      編輯:程式設計綜合問答

    需求

    HTML 結構:<li><a><span>1</span><span>2</span><span>3</span></a></li>,需將每個 <li> 下第 2、3 個 <span> 設置為指定值。

    jQuery 代碼

    $('#ul li span:not(:first-child)').html('new value');
    // 或更精確:第 2、3 個 (索引 1、2)
    $('#ul li').each(function() {
        $(this).find('span').eq(1).html('value2');
        $(this).find('span').eq(2).html('value3');
    });
    

    選擇器解析

    • :not(:first-child):排除第一個 span,匹配第 2~N 個。
    • .eq(index):精確選擇指定索引 (0-based) 的元素。

    完整示例

    <ul id="ul">
      <li><a><span>A1</span><span class="c2">--</span><span class="c3">--</span></a></li>
      <li><a><span>B1</span><span class="c2">--</span><span class="c3">--</span></a></li>
    </ul>
    <script>
    $('#ul li span:not(:first-child)').text('已設置'); // 所有非第一個
    // 或分別設置
    $('#ul li').each(function() {
        $(this).find('span').eq(1).text('第二個');
        $(this).find('span').eq(2).text('第三個');
    });
    </script>
    
    1. 上一篇文章:
    2. 下一篇文章:
    Copyright © 程式碼之家 All Rights Reserved