Question

如何选择“tbody”使用下面的html代码中的函数“tbodyExpand（）”中的jquery？我尝试使用$(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

虽然所有这些例子都是合法的，但你可以大大简化你的结构：

为活动元素指定一个ID（在这种情况下，我已经给它click）。

绑定到该ID的.click()事件：

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

搜索您想要的元素：

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

如何通过jquery选择器选择父元素的子元素？

3 个答案: