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: http://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value — ben, Jan 17 '14 at 23:32

score 1 · Answer 1 · answered Jan 17 '14 at 23:43

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 '14 at 23:43

David Thomas

249,100
51
377
410

For some reason $(this).data('descriptionid') didn't work. Then I realized I forgot to put [data-description="' instead of [data="'. Thank you guys. – Tamás Jan 18 '14 at 07:55

How to target with data attribute in jQuery?

1 Answers1