使用 Javascript 获取所有（未知）<li> 元素的属性答案

【问题标题】：Get attributes for all (unknown) <li> elements with Javascript使用 Javascript 获取所有（未知）<li> 元素的属性
【发布时间】：2020-04-11 13:50:47
【问题描述】：

我需要用 JavaScript 连接从第二个 li 元素开始的所有标题值。问题是我想在不同的页面中使用它，所以我无法知道 li 元素的确切数量。

  <div id="breadcrumb">
        <ul>
            <li title="One">One</li>
            <li title="Two">Two</li>
            <li title="Three">Three</li>
            <li title="Four">Four</li>
         </ul>
  </div>

我为每个元素使用一个变量，但如果缺少一个或多个元素，则 var 无效并且 concat 函数不起作用。

var a = document.querySelector(".breadcrumb li:nth-child(2) > a").getAttribute("title");
var b  = document.querySelector(".breadcrumb li:nth-child(3) > a").getAttribute("title");
var c  = document.querySelector(".breadcrumb li:nth-child(4) > a").getAttribute("title");
var d  = document.querySelector(".breadcrumb li:nth-child(4) > a").getAttribute("title");

var str = a.concat(b,c,d);
console.log(str)

有没有办法做到这一点？

【问题讨论】：

抓住所有并跳过第一个：jsfiddle.net/khrismuc/61uqkmfw

标签： javascript

【解决方案1】：

使用querySelectorAll() 和map()：

const res = [...document.querySelectorAll("#breadcrumb li:not(:first-of-type)")].map(el => el.getAttribute("title")).join(" ")
console.log(res)

<div id="breadcrumb">
  <ul>
    <li title="One">One</li>
    <li title="Two">Two</li>
    <li title="Three">Three</li>
    <li title="Four">Four</li>
  </ul>
</div>

【讨论】：

我避免使用地图以免让他/她更加困惑。不错！
我认为你可以使用"#breadcrumb li:not(:first-child)" 跳过第一个孩子
使用.slice(1) 跳过第一个。
@NickParsons 我打算使用filter()，但我更喜欢你的解决方案。
.map(({ title }) => title).join(" ") 因为这会让我感觉更好。顺便说一句，完美的答案。

【解决方案2】：

使用一点 jquery 我实现了这一点，它应该可以解决您的问题。

let list = [];
$('#breadcrumb li').each(function(i){
   if(i !== 0) { list.push($(this).attr('title')); }
});

list.toString() //One,Two,Three,Four

您尝试使用的方法无法在大型列表中扩展

【讨论】：

哦！一点 if 语句会使其跳过

【解决方案3】：

两个小评论：

如果你想访问id=breadcrumb，你必须使用#breadcrumb而不是.breadcrumb
您的 HTML 代码中没有 a 标记，因此您的 querySelector 不会给您任何结果

但是，让我们讨论一个解决方案：

let listElements = document.querySelectorAll("#breadcrumbs li");  // get all list elements
listElements = Array.from(listElements);  // convert the NodeList to an Array
listElements = listElements.filter((value, index) => index >= 1);  // remove the first element
let titleAttributes = listElements.map(listElement => listElement.getAttribute("title"));  // get the title attributes for every list elements. The result is an array of strings containing the title
console.log(titleAttributes.join(", "));  // concatenate the titles by comma

以上语句可以写成一行：

Array.from(document.querySelectorAll("#breadcrumbs li"))
  .filter((value, index) => index >= 1)
  .map(listElement => listElement.getAttribute("title"))
  .join(", ");

编辑：感谢 Barmar，我修正了我的答案

【讨论】：

querySelectorAll() 返回一个NodeList，它只支持forEach，不支持filter。
你可以使用Array.from(document.querySelectorAll(...)).slice(1)。
为什么要使用复杂的过滤器而不是slice()？
恕我直言，这更容易理解

【解决方案4】：

类似的东西？

const All_LI = [...document.querySelectorAll('#breadcrumb li')];

let a = ''
for (let i=1; i<All_LI.length; i++) { a += All_LI[i].title }


console.log('a-> ', a )

// .. or :

const b = All_LI.reduce((a,e,i)=>a+=(i>0)?e.title:'', '' )
console.log('b-> ', b )

<div id="breadcrumb">
  <ul>
      <li title="One">One</li>
      <li title="Two">Two</li>
      <li title="Three">Three</li>
      <li title="Four">Four</li>
   </ul>
</div>

【讨论】：