CODEWITHSUNDEEP
javascriptjqueryhtml
Taylor D Wright
Taylor D Wright

Reputation: 11

Using Javascript/Jquery to number a list

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?

Upvotes: 1

Views: 91

Answers (6)

Arun D
Arun D

Reputation: 464

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>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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>

Upvotes: 0

AG_
AG_

Reputation: 2699

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>

Upvotes: 0

Hikmat Sijapati
Hikmat Sijapati

Reputation: 7004

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>

Upvotes: 0

Faraz Babakhel
Faraz Babakhel

Reputation: 664

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>

Upvotes: 0

Rahul
Rahul

Reputation: 18577

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.

Upvotes: 1

Related Questions