Как выбрать дочерний элемент родителя с помощью селектора jquery?

Question

Как выбрать «tbody» использовать jquery из функции «tbodyExpand()» в нижнем html-коде? Я пытался использовать $(this).closest('table').find('tbody'), но не работает.

<div class="bs-example"> 
    <table class="table table-border table-striped table-condensed table-hover"> 
     <thead> 
     <tr> 
      <td><b>TITLE</b><a href="javascript:void(0)" onclick="tbodyExpand()" style="float: right;">EXPAND</a></td> 
     </tr> 
     </thead> 
     <tbody class="hide"> 
     <tr> 
      <td>ALT (U/L)</td> 
      <td><input class="span1" name="ALT" value="" placeholder=""></td>    
     </tr> 

Answer 1

Поступая onclick="tbodyExpand.call(this)" вы можете использовать:

$(this).closest('table').find('tbody'); 

В противном случае this внутри функции будет указывать на глобальный объект (окно) не элемент кликнули.

Вместо написания встроенных обработчиков вы можете связать событие с помощью селектора.

Пример:

<a href="#" class="expand floatRight">EXPAND</a> 

CSS:

.floatRight{ 
    float: right; 
} 

и

$(function(){ 
     $('.expand').click(function(e){ 
      e.preventDefault(); //Much better than doing javascript:void(0) 
      var $tbody = $(this).closest('table').find('tbody');` 
      //or $(this).closest('thead').next('tbody'); 
     }); 
    }); 

Таким образом, вы также можете выделить, CSS, JS и HTML и избежать написания встроенных сценариев/стили ,

Answer 2

попробовать что-то вроде этого

HTML

<a href="javascript:void(0)" onclick="tbodyExpand(this);" style="float: right;">EXPAND</a> 

Javascript

function tbodyExpand(obj){ 
    // your other code goes here 
    $(obj).closest('table').find('tbody'); 
    } 

Answer 3

Хотя все эти примеры являются законными, вы могли бы в значительной степени просто ваша структура:

1. Дайте активному элементу идентификатор (в этом случае я дал ему click).

2. Привязать к .click() события этого ID:

   $('#click').click(function(e) { 
       //you can do stuff here! and use $(this). 
   }); 
   

3. Поиск элемента, который вы хотите:

   $(this).closest('table').find('tbody');

, в результате чего:

<div class="bs-example"> 
    <table class="table table-border table-striped table-condensed table-hover"> 
     <thead> 
      <tr> 
       <td><b>CLICK EXPAND:</b> <a href="#" id='click' style="float: right;">EXPAND</a> 
       </td> 
      </tr> 
     </thead> 
     <tbody class="hide"> 
      <tr> 
       <td>ALT (U/L)</td> 
       <td> 
        <input class="span1" name="ALT" value="" placeholder="" /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

И ваш Javascript (с JQuery загружено):

$('#click').click(function(e) { 
    e.preventDefault(); //blocks the default action of an <a> link. 
    console.log($(this).closest('table').find('tbody')); 
}); 

(Обратите внимание, что я немного изменил свой код, чтобы сделать его легче увидеть, что происходит).

Поиграйте с ним здесь http://jsfiddle.net/remus/VNpn7/