Question

我有一个基本的HTML列表如下...

<ul class="test_ul">
    <li class="item" id="item1">
        Item 1
    </li>
    <li class="item" id="item2">
        Item 2
    </li>
    <li class="item" id="item3">
        Item 3
    </li>
    <li class="item" id="item4">
        Item 4
    </li>
</ul>

我正在使用javascript尝试获取每个列表项的id，然后使用循环来检查每个列表的字符串。到目前为止，我有这个...

var myvariable
myvariable = "item2"
items = document.getElementsByClassName("item");
for (i = 0; i < items.length; i++) {
    console.log(i);
    console.log(item[i]);
}

这对我不起作用，是因为它不是一个真正的阵列吗？

Answer 1

您正在记录索引i，而是使用items[i].id来获取匹配元素的ID。像这样的东西

var items = document.getElementsByClassName("item");
for (i = 0; i < items.length; i++) {
  console.log(items[i].id);
}

<ul class="test_ul">
  <li class="item" id="item1">
    Item 1
  </li>
  <li class="item" id="item2">
    Item 2
  </li>
  <li class="item" id="item3">
    Item 3
  </li>
  <li class="item" id="item4">
    Item 4
  </li>
</ul>

Answer 2

使用ES6（可能需要为旧浏览器转换或添加polyfill）：

// Get the DOMCollection of node corresponding to the item class
var items = document.getElementsByClassName("item")
// Transform the DOMCollection to an array and map item.id
  , ids = Array.from(items).map(function(item) {
        return item.id;
    });
  ;    
console.log(ids);

<ul class="test_ul">
    <li class="item" id="item1">
        Item 1
    </li>
    <li class="item" id="item2">
        Item 2
    </li>
    <li class="item" id="item3">
        Item 3
    </li>
    <li class="item" id="item4">
        Item 4
    </li>
</ul>

仅使用ES5：

var items = document.getElementsByClassName("item")
  , ids = []
  ; 
for(var i = 0, c = items.length; i<c; i++) {
    ids.push(items[i].id);
}
console.log(ids);

    <ul class="test_ul">
        <li class="item" id="item1">
            Item 1
        </li>
        <li class="item" id="item2">
            Item 2
        </li>
        <li class="item" id="item3">
            Item 3
        </li>
        <li class="item" id="item4">
            Item 4
        </li>
    </ul>

Answer 3

您可以为类似对象的数组借用Array#map，并只返回对象的id属性。

var result = [].map.call(document.getElementsByClassName("item"), function(o) {
        return o.id;
    });

console.log(result);

<ul class="test_ul">
    <li class="item" id="item1">Item 1</li>
    <li class="item" id="item2">Item 2</li>
    <li class="item" id="item3">Item 3</li>
    <li class="item" id="item4">Item 4</li>
</ul>

Answer 4

我的理解是，你想循环遍历这个项目列表，并根据指定的字符串找到项目的匹配。

到目前为止，你所做的课程很好。这将允许您引用所有列表项，但根据我认为您尝试做的事情，我们并不需要这些ID。

如果我是你，我会使用querySelectorAll，它返回一个可迭代的HTML节点数组，我们可以随意做任何事情。

这是我的代码。

＆＃13;

let listItemArray = document.querySelectorAll('.item');
console.log(listItemArray);
const SEARCH_STRING = 'Item 1'

for(let i=0; i<listItemArray.length; i++) {
  if(listItemArray[i].innerText === SEARCH_STRING) {
    console.log(`The item was found! ${listItemArray[i]}`); // This syntax is called a query string. Powerful stuff. Look them up.
  }
}

＆＃13;

<ul class="test_ul">
    <li class="item" id="item1">
        Item 1
    </li>
    <li class="item" id="item2">
        Item 2
    </li>
    <li class="item" id="item3">
        Item 3
    </li>
    <li class="item" id="item4">
        Item 4
    </li>
</ul>

＆＃13;

Answer 5

将ID =“ lstUsers”添加到ul元素<您已在DOM中注册

for (var i = 0; i < lstUsers.children.length; i++) {
   alert( lstUsers.children[i].innerText);
}

#lstUsers  <--css with your id you shrink your HTML down this way...

Javascript foreach循环列表项

5 个答案: