previous first img src - jQuery

Question

i'm trying to obtain the src of an image placed before the link i click:

<ul id="grid">
        <li><a href="prod-det.php" class="tip" rel="product-tip.php"><img src="../upload/mainmenu-articolo-ico.jpg" width="110" height="115"><p>GSE29KGYCSS / GSE29KGYCWW</p></a>
        <div class="options">
            <a href="#briciole" class="opt-compare off">Compare</a>
            <a href="#briciole" class="opt-wish off">Wishlist</a>
        </div></li>

and write this path:

$('.options a').click(function() {
 $("#compare .myge-grid").append(closest('img').attr('src'));

but i fail to obtain the img src. Someone can please point me to the right direction? tks in advance

edit: more code here http://jsfiddle.net/X2NBn/1/

Rob W · Accepted Answer · 2011-10-11T16:32:46.987

1

Update:
According to your document structure, this is what you're looking for:

$("img", $(this).parents('li:first')).attr("src");

Note: attr("src") returns the src as defined in the HTML source ('../upload.png'). If you want the full path, use .prop("src") instead.

Old answer
^{You should define the JQuery object on which you want to use the .closest() method.

Currently, you're not using the jQuery .closest method, but a (probably undefined) closest() function.
This should work as intended, after adding $(this):
$('.options a').click(function() {
$("#compare .myge-grid").append($(this).closest('img').attr('src'));}

edited Oct 11 '11 at 16:32

answered Oct 11 '11 at 16:04

Rob W

341,306
83
791
678

thanks Rob, i've tried this solution but it doesn't work :( Just for clarity, in the main code i click one of the 2 inside the #options div. – Lanny Oct 11 '11 at 16:13
.closest() looks for the nearest ancestor. You are looking for a sibling. – Greg Pettit Oct 11 '11 at 16:15
thank you very much Rob! so "parents" go back until it find the li, then scan the "li" content for a src. very very helpful! Thanks again! – Lanny Oct 11 '11 at 16:38
**+1** Didn't know that I could use `prop()` for that. Thanks! – Eric Oct 11 '11 at 16:42
@Lanny: Note that it's normally more efficient and more extendable to avoid lots of "go back until you find" queries, and instead just get the parent object in the process of binding the event handlers, as in my answer. – Eric Oct 11 '11 at 16:44

score 0 · Answer 2 · answered Oct 11 '11 at 16:37

0

closest is not magic. It doesn't mean "visually closest". It means "nearest ancestor". Rather than searching for the list item every time the element is clicked, as in Rob W's answer, you'd do better to iterate over the list items, and bind the click handler to each in turn, like this:

$('#grid li').each(function() {
    var item = $(this);
    item.find('.options a').click(function() {
        $("#compare .myge-grid").append(item.find('img').attr('src'));
    });
});

answered Oct 11 '11 at 16:37

Eric

95,302
53
242
374

Eric, thank you, I understood perfectly what you are saying. And I agree with you, so it is easier to handle complex operations (it's also probably more mnemonic). – Lanny Oct 11 '11 at 20:14
Sure you don't mean idiomatic, rather than mnemonic? – Eric Oct 11 '11 at 20:57
:) i mean 'easy to remember' - once you have understood the basic concept. – Lanny Oct 12 '11 at 08:32

previous first img src - jQuery

2 Answers2