Question

我有一个像这样的可排序列表：

<div id = "sortable">

         <div class = "sortableItem day">Monday</div>
         <div class = "sortableItem" id="result1">Hotel 1</div>
         <div class = "sortableItem" id="result2">Hotel 2</div>
         <div class = "sortableItem" id="result3">Hotel 3</div>
         <div class = "sortableItem" id="result4">Hotel 4</div>
         <div class = "sortableItem" id="result5">Hotel 5</div>

</div>

我正在尝试访问div“可排序”的不同子元素，但我只管理第一个-之后，我返回“未定义”。

所以当我登录时：

sortable.childNodes[1]

我确实在控制台中返回了“星期一”。但是，一旦我将其更改为：

sortable.childNodes[2]

（或者与此相关的任何其他索引）我不确定。我确信我在做一些令人难以置信的基本错误，但是任何指针都将不胜感激。

Answer 1

尝试使用children代替childNodes

sortable.children[1]

Answer 2

childNodes包含空格。在尝试获取其innerText（可能像if (sortable.childNodes[x].innerText) { /* use innerText */ }一样简单）之前，您需要验证该索引处的子节点是否是元素。

Answer 3

正如其他答案已经提到的那样，您正在访问空格而不是元素。

我为您整理了一个小提琴，以仅获取具有sortableItem类的childNode：）

https://jsfiddle.net/joshmoxey/g9tebkzw/

const sortable = document.getElementById("sortable")

//create loopable array from childNodes
const childNodes = Array.from(sortable.childNodes)

//filter through the array and remove anything that doesn't have a class of sortableItem as the first class name)
const children = childNodes.filter((node) => node.className ? node.className.startsWith("sortableItem") : false)


//do something with children here
console.log(children)

Answer 4

最简单的方法是将documentation与:nth-child伪选择器一起使用

console.log(document.querySelector('#sortable > :nth-child(1)').textContent)
console.log(document.querySelector('#sortable > :nth-child(2)').textContent)
console.log(document.querySelector('#sortable > :nth-child(3)').textContent)

<div id="sortable">

  <div class="sortableItem day">Monday</div>
  <div class="sortableItem" id="result1">Hotel 1</div>
  <div class="sortableItem" id="result2">Hotel 2</div>
  <div class="sortableItem" id="result3">Hotel 3</div>
  <div class="sortableItem" id="result4">Hotel 4</div>
  <div class="sortableItem" id="result5">Hotel 5</div>

</div>

无法访问可排序列表中子元素的innerHTML

4 个答案: