CODEWITHSUNDEEP
javascriptjqueryfindselectorimage
technopeasant
technopeasant

Reputation: 7969

Figure out jQuery selector for an image in a link in a span in a div

I've been having trouble hashing out a selector for the image inside this mess of code below. Originally thought $('img.gallery')[0]; would work, but it doesn't.. also tried $('img.advance-link') and $('.gallery').find(img)[0];

Thanks for your help!

JS Fiddle: http://jsfiddle.net/danielredwood/UfGrM/

HTML:

<div class="gallery front">
    <span class="image-wrapper current">
        <a class="advance-link" rel="history" href="#1" title="Title #10">
            <img alt="Title #10" src="../img/10.jpeg">
        </a>
    </span>
</div>

Upvotes: 1

Views: 2121

Answers (6)

comu
comu

Reputation: 921

$("img:eq(0)").addClass("test");

Upvotes: 0

FloydThreepwood
FloydThreepwood

Reputation: 1585

$('.gallery .image-wrapper .advance-link img').css('border', '10px solid black');

Just use it like a CSS Selector.

This reads like search for every image contained by a advance-link wich in turn must be contained by a image-wrapper wich must be inside a gallery.

When you want access the jQuery result, please consider:

  • result[0] will give you the DOM node and no jQuery object, so result[0].attr('href') will be an error
  • result.eq(0) will give you a jQuery Object just containing the first result, so result.eq(0).attr('href') will work.

Upvotes: 1

prodigitalson
prodigitalson

Reputation: 60413

$('img.gallery') your image doesnt have the class gallery one of its parents does. $('img.advance-link') your image doesnt have the class advance-link its parent does.

You would need $('.gallery img') or $('.advance-link img').

Upvotes: 0

Jake Feasel
Jake Feasel

Reputation: 16945

$("div.gallery img") should work

Upvotes: 0

icirellik
icirellik

Reputation: 766

$('.gallery img').addClass('test');

Upvotes: 0

Andy
Andy

Reputation: 30135

with that construct there are many possibilities to access the image:

which range from quick and easy

$('.advance-link>img')

to rather complex but very specific (only for illustration :) )

$('div.gallery.front>span.image-wrapper.current>a.advance-link>img')

Upvotes: 1

Related Questions