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

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

내 해결책을 찾았습니다

올바른 방법은 다음과 같습니다

function OnPropertyChanged(propChangedArgs, bEntryRowPlayback)

.

일부 하위 방법이 있음

변경 후 새로 고쳐지는 오토 냉각 된 열이 있음을 알고 있습니다.

이 열에 반응합니다 ( "기간"이라고 함).나는이 간단한 스크립트를 썼다

if (propChangedArgs.fieldKey===”Duration”){
location.href=location.href;  // refresh me
}

.

현재 열이 "기간"인지 확인합니다.이것이 사실이라면 페이지가 자동으로 흔들립니다.

그것은 훌륭하게 작동하지만 좋은 MS 방식이 아닙니다.그래서 나는 그것을 가져 와서 사용자 정의 스크립트 메소드를 웨이브 컨텐츠 편집기 웹 파트 (CEWP)로 묶는 것을 섞는다.

이것은 내 블로그에서 주요 정보가있는 컷 아웃입니다.

http://sharepointsascha.tumblr.com/post/79153490652/AutoreFresh-SharePoint-Gantt-View

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.