Select first sibling

Question

I'm trying to select the inner value of the first sibling - using jQuery - in an environment where I cannot alter the html markup.

I have the following:

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>bob@example.com</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething()" />
    </td>
</tr>

I'm trying to get the value of the first <td> with the following:

function doSomething() {
    var temp = $(this).parent().parent().children().filter(':first');
    alert("you clicked person #" + temp.html());
}

All I get from this is null.

I've tried various combinations with with the .siblings() function too, but to no avail.

Any ideas?

Thanks,

Note: I forgot to mention that the table the excerpt is from is dynamically loaded & refreshed from an ajax call. This may be pertinent for suggestions that include binds.

Solution: I've gone with the following solution, inspired by the accepted answer:

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>bob@example.com</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething(this)" />
    </td>
</tr>

and for the jQuery javascript:

function startStopNode(el) {
    var temp = $(el).parent().siblings(':first').html();
    alert("you clicked: " + temp);
}

Jan Hančič · Accepted Answer · 2010-01-27T11:12:00.413

17

$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();

This will select the first TD element (:first-child filter) in the parent TR of the image. parents() returns all parents of the element, and we filter the parents so that only TR elements are returned.

Also try writing your image like so:

<img src="bobsmith.png" onclick="doSomething(this)" />

and your function like so:

function doSomething ( imgEl ) {
}

and use imgEl instead of this

edited Jan 27 '10 at 11:12

answered Jan 27 '10 at 11:06

Jan Hančič

53,269
16
95
99

I'm still getting nulls with this. I suspect that the `this` link is not resolving the originating object. – Mike Jan 27 '10 at 11:09
Thanks. Looks like I may have to go in and hack the code rendering the table. :) I was hoping to not have to do this. – Mike Jan 27 '10 at 11:15
1

why are putting the `onclick` in your element? and not bind it using jQuery? curious – Reigel Gallarde Jan 27 '10 at 11:26
@Reigel I am not responsible for the component rendering the table. I thought it more efficient to reuse the `onclick` call rather than continually bind with use of jQuery's Live module. – Mike Jan 27 '10 at 11:31

Reigel Gallarde · Answer 2 · 2010-01-27T11:21:12.687

2

$('tr td:last-child img').click(function(){

    alert($('td:first-child',$(this).closest('tr')).text());

});

edited Jan 27 '10 at 11:21

answered Jan 27 '10 at 11:08

Reigel Gallarde

64,198
21
121
139

Kordonme · Answer 3 · 2010-01-27T11:29:52.417

2

I would set up an event using jQuery, but that's totally up to you.

$("table td:last img").click(function() {
    var firstTd = $(this).parents("tr").find("td:first").html();
    alert("you clicked person #" + firstTd);
});

~~No matter what, you can still use this example with your own code:~~

function doSomething()
{
    var firstTd = $(this).parents("tr").find("td:first-child").html();
    alert("you clicked person #" + firstTd);
}

You're right. 'this' is not being passed, you need to edit the html to make that work. Or just use jQuery instead as show above.

edited Jan 27 '10 at 11:29

answered Jan 27 '10 at 11:13

Kordonme

2,314
3
20
32

While `:last` matches only a single element: the last picked element, `last-child` matches more then one: One for each parent. – Reigel Gallarde Jan 27 '10 at 11:25
@Reigel: You're absolutely right. I've changed the answer. Thanks. – Kordonme Jan 27 '10 at 11:29

score 0 · Answer 4 · answered Apr 21 '12 at 16:00

We have a table row where one column is the action, other columns contain data. One of the columns contains the product code (UPC). So we use this to display the product code whenever someone clicks an action button:

var product_code = jQuery(obj).parents('tr').children('.upc').text();
alert('product code'+product_code);

This works because our table cells have classes, such as 1919191911919 for every row.

You can use other selectors from jQuery, however. Such as .children('#myid') if you have id attributes set on the cell 19191919199191 as well as any number of the other selectors like .children(td:first) to get the first cell on the same row.

score 0 · Answer 5 · answered Jan 27 '10 at 13:21

maybe this will help somebody. This is just a part of the whole article here.

The difference

If you want to use this for accessing the HTML element that is handling the event, you must make sure that the this keyword is actually written into the onclick property. Only in that case does it refer to the HTML element the event handler is registered to. So if you do

element.onclick = doSomething;
alert(element.onclick)

you get

function doSomething()
{
    this.style.color = '#cc0000';
}

As you can see, the this keyword is present in the onclick method. Therefore it refers to the HTML element.

But if you do

<element onclick="doSomething()">
alert(element.onclick)

you get

function onclick()
{
    doSomething()
}

This is merely a reference to function doSomething(). The this keyword is not present in the onclick method so it doesn't refer to the HTML element.

score 0 · Answer 6 · answered Jun 25 '20 at 08:58

REALLY, no need for jquery in this use case. So for those browsing for a general answer and not specifically to jquery, or those willing for a more performant solution. This solution is approx 10x faster than its jquery counterpart. See reference

function doSomething(el) {
    var temp = el.closest('tr').firstElementChild.innerHTML;
    alert("you clicked: " + temp);
}

Select first sibling

6 Answers6