選擇一個最接近的元素

Question

我有問題，通過使用jQuery選擇一個最接近的元素。

我的HTML代碼

<table> 
    <tbody> 
     <tr>   
      <td> 
       <span class="control"><img class="doAction"></span> 
      </td> 
     </tr> 
     <tr>  
      <td class="details">sometext</td> 
     </tr> 
    </tbody> 
</table> 

我想點擊圖片.doAction

但問題後獲得來自.details文字，我有多次這種相同的HTML代碼，所以我只要最接近這個img.details文字即可獲得。

我該怎麼做？

Answer 1

您還可以使用.parents()與.next()和.find()

$('.doAction').on('click', function() { 
    console.log($(this).parents('tr').next().find('.details').text()); 
}); 

Demo

在這裏，我選擇img標籤的父tr與.doAction一個class，然後我移動到下一個tr與.details

請注意，這是.parent(s)，如果你想你搜索元素還可以使用.parent()但你需要三次使用它，就像

$(this).parent().parent().parent().next().find('.details').text(); 
/*   --^--  --^-- --^-- --^-- 
    Selects span  td  tr goes to next tr and then finds for .details 
                  and returns text */ 

Answer 2

使用.closest()遍歷表，然後找到.details TD在它：

$('.doAction').click(function(){ 
    $(this).closest('table').find('.details').text(); 
}); 

Answer 3

$('.doAction').click(function(i, e) 
{ 
    e.closest('table').find('.details').html(); 
}); 

注：另一種方法是遍歷到tr只，拿到下一個兄弟，然後得到那裏的.details。這可能是更精確，你可能有幾個這樣的.doAction和.details元素在裏面：

$('.doAction').click(function(i, e) 
{ 
    e.closest('tr').next().find('.details').html(); 
}); 

參考：

http://api.jquery.com/closest/