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>[email protected]</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>[email protected]</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);
}

Answer 1

$( '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

Answer 2

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

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

});

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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);
}