JQuery獲取第幾個元素
在JQuery中我們我們經常會遇到，在一個相對復雜的環境中，要找到第幾個元素或第N個元素的物件（或值），我以前也寫過不少這種遍歷取特定的物件，本以為早已爛熟于心了，沒想到這次筆者在一個新的專案里，碼磚的時候竟然卡殼了，當時還以為發現了新的有趣的新寫法，后來發現原來是把之前的東西記得模糊了，著實拉閘，以前還寫過JQuery 選擇器重點內容的筆記，點兒記憶都沒得了
-
eq() 選擇器選取帶有指定 index 值的元素，
-
第一個元素的 index 值是 0(不是 1)，
實體如下：
<div><span>dddddddddddddddddddd</span></div> <%--第一個父div盒子--%>
<div onclick="alertMsg(this);" style="border: 1px solid red"> <%--第二個父div盒子--%>
<div>
<span>aaaaaaaaaaaaaaaa</span>
</div>
<div>
<div>
<span class="textone">bbbbbbbbbbbbbbb</span>
</div>
<div>
<span class="textone text_nr">ccccccccccccccc</span>
</div>
<div>
<span>eeeeeeeeeeeeeee</span>
<span>fffffffffffffffff</span>
</div>
</div>
</div>
<script>
//第二個父div盒子的點擊事件
function alertMsg(arg1) {
//為第二個父div盒子，所有的兒子設定css屬性
$(arg1).children().css({"color":"red","border":"2px solid blue"});
//獲取到ccccccccccccccc的幾種方式
console.log($(arg1).children().eq(1).children().eq(1).children().text());
console.log($(arg1).find("span").eq(2).text());
console.log($(arg1).find("span.textone.text_nr").text());//這種選擇器遍歷中間不能有空格
console.log($(arg1).find("span.text_nr").text());//這一種和上面的寫法效果相同
// console.log($(arg1).find("div")[0].text()) //錯
// console.log($(arg1).find("div").get(0).text()) //錯
}
</script>
實體截圖：
onclick事件觸發前：
onclick事件觸發后：
筆者在網上查到，以上實體的最后兩種寫法，但現在竟然都報錯了，get()我確實是第一次看到，但是[]中括號這種寫法我記得以前是寫過的，可是現在都報錯了，了，，，
創作不易，如果這篇文章能夠幫助到你，希望能關注或收藏一下筆者，如果文章內容有問題還望指正，共同學習，進步！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289611.html
標籤：其他
上一篇：學習JavaScript的第一天
下一篇：Promise--實踐練習之fs模塊 & node運行Js腳本 & Promise封裝練習-fs模塊 & util.promisify方法