Question

我需要从第二个li元素开始使用Javascript连接所有标题值。问题是我想在不同的页面中使用它，所以我不知道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)

有办法吗？

Answer 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>

Answer 2

两句话：

如果要访问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(", ");

编辑：感谢巴尔玛，我确定了答案

Answer 3

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

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

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

您尝试使用的方法不会在大列表上缩放

Answer 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>

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

4 个答案: