how to get data from each li using jquery each function?

Question

I have a unordered list and each list element have "data-id" attribute, the idea is that using JQuery's each function iterate through each list element and get the "data-id" value and dynamically assign the position, ie to make a item slider that slides one item at a time. but on each the value of data I'm getting is "1", ie its taking value from the first element only, how do I fix it??

HTML

<div class="explore_matches">
   <p>Recent Matches</p>
   <ul class="clearfix item-slider">
       <li data-id="1" ><span>1</span></li>
       <li data-id="2" ><span>2</span></li>
       <li data-id="3" ><span>3</span></li>
       <li data-id="4" ><span>4</span></li>
       <li data-id="5" "><span>5</span></li>
       <li data-id="6" "><span>6</span></li>
       <li data-id="7" "><span>7</span></li>
       <li data-id="8" "><span>8</span></li>
    </ul>
    <button name="pre">Pre</button>
    <button name="next">Next</button>
</div>

JavaScript

var item_width = $('.item-slider').width();
var item_margin = (item_width-600)/5;
var items = $('ul.item-slider>li');

$.each(items,function(index){

    var pos = $('.item-slider > li').data('id') * 150;
    if(index === 0)     
        $(this).css("left", pos);
    else
        $(this).css("left", pos + index * item_margin);
    console.log(pos);
})

Where are you accessing the data-id attribute in your code? — Nikolay Ermakov
– Nikolay Ermakov, Commented Aug 18, 2016 at 5:23
oops, since that wasn't working i'm using the index of each function, wait let me edit, the question — River CR Phoenix
– River CR Phoenix, Commented Aug 18, 2016 at 5:28
Something wrong in your HTML. Remove extra quotes from 5th li. — Akshay
– Akshay, Commented Aug 18, 2016 at 6:51

Mayank Pandeyz · Accepted Answer · 2016-08-18 05:23:22Z

9

Try this:

$('li').each(function() {
    var data = $(this).attr('data-id');   // it will give 1,2,3 and so on
    //do stuff to each
});

answered Aug 18, 2016 at 5:23

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

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

2 Comments

River CR Phoenix Over a year ago

thanks man, but please check the accepted answer, I think that is the right way to use data since there is a data function.

gavgrif Over a year ago

be careful with accepting simplistic answers @River CR Phoenix there is often a subtle reason why one option is better than another.

z0mBi3 · Accepted Answer · 2016-08-18 05:27:26Z

4

You can get the elements attribute using getAttribute method

var item_width = $('.item-slider').width();
var item_margin = (item_width-600)/5;
var items = $('ul.item-slider>li');

$.each(items,function(index, node){
    var pos = index * 150;
    alert(node.getAttribute('data-id'));
    if(index === 0)     
        $(this).css("left", pos);
    else
        $(this).css("left", pos + index * item_margin);
    console.log(pos);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="explore_matches">
   <p>Recent Matches</p>
   <ul class="clearfix item-slider">
       <li data-id="1" ><span>1</span></li>
       <li data-id="2" ><span>2</span></li>
       <li data-id="3" ><span>3</span></li>
       <li data-id="4" ><span>4</span></li>
       <li data-id="5" "><span>5</span></li>
       <li data-id="6" "><span>6</span></li>
       <li data-id="7" "><span>7</span></li>
       <li data-id="8" "><span>8</span></li>
    </ul>
    <button name="pre">Pre</button>
    <button name="next">Next</button>
</div>

answered Aug 18, 2016 at 5:27

z0mBi3

1,5448 silver badges10 bronze badges

1 Comment

River CR Phoenix Over a year ago

yeah, this works, but is there any way to get the data value from each li??

Nikolay Ermakov · Accepted Answer · 2016-08-18 05:35:30Z

3

Just replace

var pos = $('.item-slider > li').data('id') * 150;

with

var pos = $(this).data('id') * 150;

answered Aug 18, 2016 at 5:35

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

7 Comments

River CR Phoenix Over a year ago

Awesome, such simple thing hard to notice, thanks man Nikolay,

gavgrif Over a year ago

take care with this - I believe that using the .data() method - the value is cached and may cause altered functionalty - I would suggest .attr('data-id'); as @Mayank Pandey has suggested

Nikolay Ermakov Over a year ago

@gavgrif - What makes you think it is cached?

gavgrif Over a year ago

i used to use .data('x') a lot but was reading in SO about the different aspects of data attributes and people smarter than me pointed it put - so now I use .attr('data-x'); as the preferred method of getting / seeting the data attribute value.

Nikolay Ermakov Over a year ago

Well, it seems the OP is safe enough if he doesn't start changing the attribute value afterwards, which I'm quite sure of since it is id-something. Otherwise he may switch to var pos = $(this).attr('data-id') * 150;.

|

Collectives™ on Stack Overflow

how to get data from each li using jquery each function?

3 Answers 3

2 Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related