jquery traversing table

Question

When i click on a link "zmeniť pozíciu", i want to save its closest img to variable.

<table border="1">
    <tbody> 
        <tr>        
            <th rowspan="3">1</th>
            <th>Nadpis</th>
            <td colspan="9">Eiusmod tempor</td>
            <td> <a href="#">zmeniť</a> </td>
            <td rowspan="3"> <a class="zmenit-poziciu" href="#">zmeniť pozíciu</a> </td>
        </tr>
        <tr>
            <th>Text</th>
            <td colspan="9">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam ...
            </td>
            <td> <a href="#">zmeniť</a> </td>
        </tr>
        <tr class="obrazok">
            <th>Obrázok</th>
            <td colspan="9"> <img alt="img" src="http://lorempixel.com/500/120/sports/1"> </td>
            <td ><a href="#">zmeniť</a></td>

        </tr>

    </tbody>
</table>

i tried this but it doesn't work

$(".zmenit-poziciu").click(function() {

        var img = $(this).parent().closest("obrazok").html();
        alert(img);
        return false
    });

demo

score 0 · Answer 1 · answered Jan 07 '13 at 17:12

0

Wrong selector used.

Change:-

var img = $(this).parent().closest("obrazok").html();

To:-

var img = $(this).parent().closest(".obrazok").html();

Using your current selector, you are actually looking for a tag called obrazok, which I'm guessing you don't have in your doc.

answered Jan 07 '13 at 17:12

Paul Alan Taylor

10,474
1
26
42

Can I ask why you're using (perpetuating the use of) `parent()` *and* `closest()`? – David Thomas Jan 07 '13 at 17:13
parent will only get you to the `td` level – wirey00 Jan 07 '13 at 17:13
@DavidThomas are parent and closest things we should avoid now? – gbtimmon Jan 07 '13 at 17:17
Sure, I was responding to the user's specific question. – Paul Alan Taylor Jan 07 '13 at 17:33
@gbtimmon: no, not to be *avaoided*, but `parent()` goes up one level (to the parent), and then `closest()` looks among the ancestor elements for the first occurence of an element that matches the selector. So, `parent()` just seemed redundant in context, so I wondered if there was an explicit reason for using it is all. – David Thomas Jan 07 '13 at 18:08

score 0 · Answer 2 · edited May 23 '17 at 12:18

Closest gets you the closest element matching the selector higher up the hierarchy. Docs

From the docs:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

In your case, the tr matching .obrazok is not higher in the hierarchy when viewed from the clicked link.

You will need something that traverses the DOM and gets you the nearest element in the DOM. This answer I posted for another question I believe should help: https://stackoverflow.com/a/12873187/921204

You can use it like:

$(".zmenit-poziciu").click(function() {
    var img = nextInDOM('.obrazok', $(this));
    alert(img);
    return false
});

score 0 · Accepted Answer · answered Jan 07 '13 at 17:22

You can get the image like this

$(".zmenit-poziciu").click(function () {
  var img = $(this)
            .closest('tr') // get to the tr level
            .nextAll(".obrazok:first") // find the next tr sibling with class=obrazok
            .find('img'); // find the img
  alert(img.attr('src'));
  return false;
});

http://jsfiddle.net/wirey00/Z5CeE/

jquery traversing table

3 Answers3