How to target with data attribute in jQuery?

Question

I created a portfolio in which I have a list item for each image element. I want the following: click on an image, get its data attribute value and run the rest of the script only on that li item which has the same data attribute value. Somewhat like this:

var data1 = $("#portfolio li").data('descriptionid');
var data2 = $('.img-description').data('description');
$('#portfolio li').click(function(){
    $(".img-description").data("img").stop()
    .animate({
        "left" : '0px'
    }, 400);
});

<div id="portfolio">
    <ul>
    <li><img src="img1.jpg" width="320px" data-descriptionid="img1"></li>
    <li><img src="img2.jpg" width="320px"></li>
    </ul>
    </div>
    <div id="idc">
        <ul>
        <li class="img-description" data-description="img1">
            <p>
            Lorem ipsum dolor sit amet, consectetur
            </p>
            </li>
        </ul>
        </div>
</div>

I have a feeling that the variables shouldn't be outside, that i need to store the data in the variable in the moment when I clicked on the specific item. How do I proceed further? Thank you for your help.

This was already answered here: stackoverflow.com/questions/4191386/… — ben
– ben, Commented Jan 17, 2014 at 23:32

David Thomas · Accepted Answer · 2014-01-17 23:43:32Z

1

At its simplest, I'd suggest:

$('#portfolio li').click(function(){
    $('.img-description[data="' + $(this).data('descriptionid') + '"]').stop()
    .animate({
        "left" : '0px'
    }, 400);
});

answered Jan 17, 2014 at 23:43

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

1 Comment

Tamás Over a year ago

For some reason $(this).data('descriptionid') didn't work. Then I realized I forgot to put [data-description="' instead of [data="'. Thank you guys.

Collectives™ on Stack Overflow

How to target with data attribute in jQuery?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related