javascript - 要取 指定索引的ul 裡的 所有li 怎麼取
淡淡烟草味
淡淡烟草味 2017-07-05 10:48:04
0
4
835

要取 指定索引的ul 裡的 所有li 怎麼取

我想這麼寫
var afterUl=document.querySelectorAll('ul')[sy-1];
var afterLi=afterUl.querySelectorAll('li');
但是下面的一行會報錯誤
leilei.html:128 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined。 。 。
我該怎麼寫。 。新手求助

淡淡烟草味
淡淡烟草味

全部回覆 (4)
淡淡烟草味

----- 06-03 14:50 -----

感謝 jasonintju 指出錯誤。

這裡的報錯並不是因為沒有querySelectorAll方法,是由於題主的 下標 越界了,導致取到的 是undefinedundefined沒有querySelectorAllorgry 方法,故報錯。

正確的下標寫法是沒有問題的。

補充文件

Element.querySelectorAll() - Web APIs | MDN

----- 06-03 04:30 -----

leilei.html:128 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined

報錯資訊已經給你提示了,不能讀取

querySelectorAll屬性,因為它是 undefined

原因是因為

querySelectorAlldocument的方法,而不是element的方法。

var afterUl = document.querySelectorAll('ul')[0]; // document.querySelectorAll('ul') 通过 document 的方法 querySelectorAll 得到了当前文档下的所有 ul 元素,是一个 NodeList 类数组。之后假设通过 [0] 取到了这个 NodeList 中的第一个元素,那么 afterUl 这个变量指向的是一个 DOM 元素,也就是 element var afterLi=afterUl.querySelectorAll('li'); // 这时用 afterUl 也就是一个 element 调用 querySelectorAll,由于 element 下没有 querySelectorAll 这个方法 自然就报错了
解決方案是使用

getElementsByTagName

var oUl = document.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li');
可以參考一下 JavaScript 文件中關於這兩個 API 的介紹

Document.querySelectorAll - Web API 介面 | MDN

element.getElementsByTagName - Web API 介面 | MDN

或使用 jQuery 的

var aLi = $('ul').eq(0).find('li');
    过去多啦不再A梦

    實作的方式很多,你可以採用原生JavaScript,也可以用各種js函式庫來實作。
    這裡採用原生JavaScript整理一個思路,在ul的DOM元素上加入一個id屬性,透過document.getElementById取出ul,然後透過getElementsByTagName取出li元素。

    程式碼如下:

    • 1
    • 2
    • 3
    • 4
    • 5
    var ul_wrap = document.getElementById('ul-wrap'); var li_item = ul_wrap.getElementsByTagName('li'); console.log(ul_wrap); console.log(li_item);
      过去多啦不再A梦

      let oLis = document.getElementsByTagName("ul")[index].getElementsByTagName("li");

        为情所困

        我自己找到錯誤了,是因為我後面的索引[sy-1]中變量sy的是之前遍歷所有li時候賦值的,因為所有li比所有ul多很多,所以[sy-1]超過了ul的個數,上面那行就會undefined 下面那行就報錯了。
        謝謝大家。 。這問題太幼稚。 。

          最新下載
          更多>
          網站特效
          網站源碼
          網站素材
          前端模板
          關於我們 免責聲明 Sitemap
          PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!