CODEWITHSUNDEEP
javascript
Fux
Fux

Reputation: 5

Get attributes for all (unknown) <li> elements with Javascript

I need to concatenate all the title value starting from second li elements with Javascript. The problem is that I want to use it in different pages, so I can't know the exact number of li elements. 

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

I use a variable for each element but if one or more element is missing the var is not valid and the concat function doesn't work.

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)

Is there a way to do that?

Upvotes: 0

Views: 868

Answers (4)

Mister Jojo
Mister Jojo

Reputation: 22265

something like that ? 

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>

Upvotes: 0

symlink
symlink

Reputation: 12209

Use querySelectorAll() and 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>

Upvotes: 5

Thomas Prei&#223;ler
Thomas Prei&#223;ler

Reputation: 623

Two minor remarks:

  • If you want to access the id=breadcrumb, you have to use #breadcrumb instead of .breadcrumb
  • There is no a tag in your HTML-code, therefore your querySelector won't give you any result

However, let's discuss a solution:

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

You can write the above statements in a single line:

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

EDIT: I fix my answer, thanks to Barmar

Upvotes: 0

rocky
rocky

Reputation: 81

Using a little jquery i achieved this and it should solve your issues.

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

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

The method you tried to use wont scale on a large list

Upvotes: 0

Related Questions