Using Javascript/Jquery to number a list

Question

I have a small sample of HTML that looks like this

<ul>
    <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
</ul>

I can't edit the HTML itself due to what I'm doing, but I need to basically add a number each time to data-side-to using only js, like so

<ul>
    <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="1" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="2" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="3" data-target="#myCarousel" class="appendLi"></li>
    <li data-slide-to="4" data-target="#myCarousel" class="appendLi"></li>
</ul>

Any ideas?

Rahul · Accepted Answer · 2017-03-16 11:26:07Z

1

Try this simple code,

$(document).ready(function(){
  $("ul>li").each(function(i,j){
     $(this).attr("data-slide-to",i);
  });
  console.log($("ul").html());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
</ul>

I have taken index of li and assigned it to data-slide-to attribute of every li.

I hope this will help.

answered Mar 16, 2017 at 11:26

Rahul

18.6k7 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Taylor D Wright Over a year ago

Thanks, it worked mate. I was making an instagram carousel, in case you were wondering.

Rahul Over a year ago

:D I wondered specific rather than wander in what's going on :) You're welcome mate!

Rahul Over a year ago

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

Faraz Babakhel · Accepted Answer · 2017-03-16 11:29:22Z

0

Try this one

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

  $('ul li').each(function(i,el)
{
   $(el).attr('data-slide-to',i); // This is your rel value
});

});
</script>

answered Mar 16, 2017 at 11:29

Faraz Babakhel

6645 silver badges17 bronze badges

Comments

Hikmat Sijapati · Accepted Answer · 2017-03-16 11:30:16Z

0

Try like this..

Core JS

var lis = document.querySelectorAll('li');
lis.forEach((element,index)=>{
element.setAttribute('data-slide-to',index);
});
console.log(lis);

Example:

var lis = document.querySelectorAll('li');
lis.forEach((element,index)=>{
element.setAttribute('data-slide-to',index);
console.log(element);
});

<ul>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
</ul>

answered Mar 16, 2017 at 11:30

Hikmat Sijapati

6,9691 gold badge11 silver badges19 bronze badges

Comments

AG_ · Accepted Answer · 2017-03-16 11:31:45Z

0

Use each to iterate between li and change the value of data-slide-to with its index

$(document).ready(function(){
  $("li").each(function(index){
    $(this).attr("data-slide-to", index)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
<li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
</ul>

edited Mar 16, 2017 at 11:31

answered Mar 16, 2017 at 11:29

AG_

2,7193 gold badges23 silver badges34 bronze badges

1 Comment

AG_ Over a year ago

yes, you are right silly mistake. I have updated the code.

Zakaria Acharki · Accepted Answer · 2017-03-16 11:32:00Z

You could use jQuery method each() to loop through all the li's and edit the data-* attributes with the index returned from the each() method using jQuery data() method :

$('ul>li').each(function(index, value){
    $(this).data('slide-to', index);
})

Hope this helps.

$('ul>li').each(function(index, value){
    $(this).data('slide-to', index);
})

//Debug
$('ul>li').each(function(i,v){
    console.log( $(this).data('slide-to') );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
</ul>

Arun D · Accepted Answer · 2017-03-16 11:47:40Z

0

Try this code, hope this helps you

$('ul>li').each(function(i, obj){
  $(this).attr('data-slide-to',i); 
})

  console.log($("ul").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
  <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li>
</ul>

answered Mar 16, 2017 at 11:47

Arun D

4743 gold badges8 silver badges26 bronze badges

Collectives™ on Stack Overflow

Using Javascript/Jquery to number a list

6 Answers 6

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related