CODEWITHSUNDEEP
javascripthtmlloops
Aleksander Ciecierski
Aleksander Ciecierski

Reputation: 23

JavaScript - select the last item from the 'for' loop

Let's say I have a simple HTML markup with three elements and a javascript loop looking through all of them. What I need to do is to select the last one of those items.

This pile of code will run a loop, select all elements with some_div class, and paste some text inside them...

What if I only wanted the last item on the list to be selected and changed?

Is there a way for me to only select the last item from the loop and then do some operations like adding a specific class to this exact element?

var elements = document.getElementsByClassName('some_div');
for (var i=0; i<elements.length; i++) {

    elements[i].innerHTML = 'hello';
}
.some_div {
  height: 30px;
  width: 100px;
  border-bottom: solid 2px black;
}
<body>
 <div class="some_div"></div>
 <div class="some_div"></div>
 <div class="some_div"></div>
</body>

Upvotes: 0

Views: 1179

Answers (3)

Shawn GameForreal
Shawn GameForreal

Reputation: 76

This is how I achieved it: First things first, I start a counter which is going to count the elements. Then, I call the tagName of the elements. Next, I call for the parent element of the elements I'm trying to fetch. If the the elements parentNode's ID is the one specified, code counts the elements. I then turn the counter into a string and split the string into an array. [1,2,3] Next I call for the last item of the array I then concatenate the elements tagName and the last number of the counter, essentially becoming; for a random example: div[3]. And finally: do somthing with that element.

The only parts you need to change in the code is; el = document.getElementsByTagName("div") change the text div to the elements you want' tagName. if(el[i].parentNode.id == "parElement"){ change the text parElement to the id of the elements parent element. And of course, the last line; for what you want to do to the last element.

function getLastItem(){
count="0";
el = document.getElementsByTagName("div")
  for(i=0;i<el.length; i++){
     if(el[i].parentNode.id == "parElement"){
     ++count
     }
   }
    let arrayOfStrings = count.toString().split(' ');
    let lastItem = arrayOfStrings[arrayOfStrings.length - 1];
    el[lastItem].innerHTML="HI! I'm the last element!";
}
To see it in action, run the snipper below 

<div id = "parElement">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>
<br>
<br>

<button onclick="getLastItem()">Find Last Element</button>

Upvotes: 0

Ali Faris
Ali Faris

Reputation: 18592

since elements is an array-like object, you can easily index the last item

const elements = document.getElementsByClassName('some_div');
if(elements.length > 0){
     const lastElement = elements[elements.length-1]
}

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074168

Selecting the last match for a class (e.g., with a CSS selector) is awkward¹, but you can easily access the last match:

var elements = document.getElementsByClassName('some_div');
var last = elements[elements.length - 1];
if (last) {
    last.innerHTML = 'hello';
}

Live Example:

var elements = document.getElementsByClassName('some_div');
var last = elements[elements.length - 1];
if (last) {
    last.innerHTML = 'hello';
}
.some_div {
  height: 30px;
  width: 100px;
  border-bottom: solid 2px black;
}
<body>
 <div class="some_div"></div>
 <div class="some_div"></div>
 <div class="some_div"></div>
</body>

¹ (or impossible? :nth-last-of-type applies to element type, not class...)

Upvotes: 2

Related Questions