retrieving element with specific value of data attribute in jquery

Hi I got in a bit of a muddle here. Basically say you have this html:

...
<a href="javascript:void(0)">
    <img alt="" data-name="myCar" data-family="ferrari" data-type="Fast Family" src="images/ferrari.png" style="left: 193.291px; opacity: 0.5; cursor: default;">    
</a>
<a href="javascript:void(0)">
    <img alt="" data-name="yourCar" data-family="aston" data-type="Fast Family" src="images/aston.png" style="left: 293.291px; opacity: 0.5; cursor: default;">    
</a>
...

In my script, there is a variable$allImages = $("a img"); containing all the images and I want to select exactly the element whose data-name attribute value is myCar and find its position - mind there are many more cars in the list.
So what I have tried first is this:
var theCar = $allImages.attr('[data-name="myCar"]').css('left');
and then
var theCar = $allImages.data('name')=="myCar".css('left');
but I think the syntax is wrong; how do I select it please?
thanks

3

Contributors

5

Replies

5 Hours

Discussion Span

5 Months Ago

Last Updated

6

Views

Question
Answered

Violet_82

Master Poster

787 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

5 Months Ago

0

I think it should be:

$("a img[data-name='myCar']").css('left');

pritaeas

Posting Prodigy

Moderator

9,265 posts since Jul 2006

Reputation Points: 1,173

Solved Threads: 1,456

Skill Endorsements: 86

5 Months Ago

0

thanks isn't there any way I can make use of that variable $allImages at all? the above line is returning undefined for whatever reason

Violet_82

Master Poster

787 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

5 Months Ago

0

This worked for me:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <a href="#">
            <img src="hacker.png" data-name="myCar" />
        </a>
        <a href="#">
            <img src="hacker.png" data-name="yourCar" />
        </a>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("a img[data-name='myCar']").hide();

                // this works too:
                $allImages = $("a img");
                $.each($allImages, function () { $("[data-name='yourCar']").hide() });
            });
        </script>
    </body>
</html>

pritaeas

Posting Prodigy

Moderator

9,265 posts since Jul 2006

Reputation Points: 1,173

Solved Threads: 1,456

Skill Endorsements: 86

5 Months Ago

0

should work

$allImages.children("[data-name='yourCar']").hide();

jstfsklh211

Junior Poster

100 posts since Apr 2011

Reputation Points: 34

Solved Threads: 27

Skill Endorsements: 1

5 Months Ago

0

thanks guys, it did work eventually, not sure why I was getting undefined, I deleted the code and started again, it all worked thanks for your help as usual

Violet_82

Master Poster

787 posts since Jan 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 1

Question Answered as of 5 Months Ago by pritaeas and jstfsklh211

retrieving element with specific value of data attribute in jquery

This question has already been solved: Start a new discussion instead