[jQuery]table元素和其他元素在遍歷的時候有點不一樣

希望解決的問題:

一個table元素,需要用jQuery找到第3行第4列對應的?單元格,

嘗試解決方案:

  $("table").children("tr:eq(2)").children("td:eq(3)")
//tr:eq(2)是給children傳參數,將結果限定為tr元素,而且是第2+1=3個
//eq(2)雖然是在selector里面好像css語句的樣子,但是還是javascript這一邊的
//然而這兩條注釋并不是這篇文章主要想說的

上面的代碼乍一看沒問題,就是跑不起來而已。

除錯:

console.log($("table").children())
//[tbody, prevObject: jQuery.fn.init[1], context: document]
console.log($("table").children().children())
//[tr, tr, tr, tr, tr, tr, tr, tr, tr, prevObject: jQuery.fn.init[1], context: document]

個人理解

  • 所以table的children不是tr,而是tbody這個東西,tbody的兒子才是tr。jQuery官方api關于children()的例子只是用了div和ul這些元素,這些元素是不會冒出些divbody或者ulbody之類東西的。
  • jQuery的遍歷方法,除了.children(),還有.find()。如果把最開始出錯的程序里面children全部改成find的話也可以順利運行。因為find是逐級往下找的,children則限制在子這一級。
  • 順便吐槽一下,自己覺得find效率應該是沒有children高的,誰叫他名字是find呢
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • DOM創建節點及節點屬性 通過JavaScript可以很方便的獲取DOM節點,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,043評論 0 9
  • 1:jQuery節點創建與屬性的處理 創建元素節點:可以有幾種方式,后面會慢慢接觸。常見的就是直接把這個節點的結構...
    碼農小楊閱讀 621評論 0 1
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,367評論 0 2
  • $(”p”).addClass(css中定義的樣式類型); 給某個元素添加樣式 $(”img”).attr({sr...
    專注寒冰三千歲閱讀 513評論 0 4
  • Attribute: $("p").addClass(css中定義的樣式類型); 給某個元素添加樣式 $("img...
    撲克臉_457e閱讀 583評論 0 1