Chọn anh chị em đầu tiên

Question

Tôi đang cố gắng chọn giá trị bên trong của người anh em đầu tiên - sử dụng jQuery - trong một môi trường mà tôi không thể thay đổi đánh dấu html.

tôi có như sau:

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

Tôi đang cố gắng để có được những giá trị của <td> đầu tiên như sau:

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

Tất cả tôi nhận được từ này là null.

Tôi cũng đã thử các kết hợp khác nhau với chức năng .siblings(), nhưng không có kết quả.

Bất kỳ ý tưởng nào?

Cảm ơn,

Lưu ý: Tôi quên kể rằng bảng đoạn trích là từ là tự động nạp & làm mới từ một cuộc gọi ajax. Điều này có thể thích hợp cho các đề xuất bao gồm các liên kết.

Giải pháp: tôi đã đi với các giải pháp sau đây, lấy cảm hứng từ câu trả lời được chấp nhận:

<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> 

và cho javascript jQuery:

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

Answer 1

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

này sẽ chọn phần tử TD đầu tiên (: bộ lọc con đầu tiên) trong TR gốc của hình ảnh. parents() trả về tất cả các bậc cha mẹ của phần tử, và chúng tôi lọc các bậc cha mẹ để chỉ các phần tử TR được trả lại.

Cũng thử viết hình ảnh của bạn như sau:

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

và chức năng của bạn như sau:

function doSomething (imgEl) { 
} 

và sử dụng imgEl thay vì this

Answer 2

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

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

}); 

Answer 3

tôi sẽ thiết lập một sự kiện bằng jQuery, nhưng điều đó hoàn toàn tùy thuộc vào bạn.

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

Không có vấn đề gì, bạn vẫn có thể sử dụng ví dụ này với mã của riêng bạn:

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

---

Bạn nói đúng. 'này' không được chuyển, bạn cần chỉnh sửa html để thực hiện công việc đó. Hoặc chỉ cần sử dụng jQuery thay vì hiển thị ở trên.

Answer 4

có thể điều này sẽ giúp ai đó. Đây chỉ là một phần của toàn bộ bài viết here.

Sự khác biệt

Nếu bạn muốn sử dụng này để truy cập vào các yếu tố HTML được xử lý sự kiện này, bạn phải chắc chắn rằng từ khóa này thực sự được viết vào thuộc tính onclick. Chỉ trong trường hợp đó, nó tham chiếu đến phần tử HTML mà trình xử lý sự kiện được đăng ký. Vì vậy, nếu bạn làm

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

bạn nhận được

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

Như bạn có thể thấy, từ khoá này hiện diện trong phương pháp onclick. Do đó nó đề cập đến phần tử HTML.

Nhưng nếu bạn làm

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

bạn nhận được

function onclick() 
{ 
    doSomething() 
} 

này chỉ đơn thuần là một tham chiếu đến hoạt doSomething(). Từ khóa này không có trong phương thức onclick để nó không tham chiếu đến phần tử HTML.

Answer 5

Chúng tôi có một hàng trong bảng có một cột là hành động, các cột khác chứa dữ liệu. Một trong các cột chứa mã sản phẩm (UPC). Vì vậy, chúng tôi sử dụng để hiển thị mã sản phẩm bất cứ khi nào ai đó nhấp nút hành động:

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

này hoạt động bởi vì các tế bào bảng của chúng tôi có các lớp học, chẳng hạn như 1919191911919 cho mỗi hàng.

Tuy nhiên, bạn có thể sử dụng các bộ chọn khác từ jQuery. Chẳng hạn như .children ('# myid') nếu bạn có thuộc tính id được đặt trên ô 19191919199191 cũng như bất kỳ số nào của các bộ chọn khác như .children (td: first) để lấy ô đầu tiên trên cùng một hàng.