选择特定的最接近元素

发布于 2024-09-30 06:05:05 字数 781 浏览 3 评论 0原文

我有以下 html ：

  <table id="objects">
    <tr>
        <td>
            <input type="text" value="2" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" value="4" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>    
  </table>

当我单击锚标记时，我想选择最接近我的链接的，并获取它的值。我该怎么做？我正在尝试：

  $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).closest('input').attr('value');
    alert(val);
  });

但没有任何运气。

原文

I have the following html :

  <table id="objects">
    <tr>
        <td>
            <input type="text" value="2" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" value="4" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>    
  </table>

When I click anchor tag I'd like to select <input> closest to my link, and get it's value. How can I do this ? I was trying :

  $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).closest('input').attr('value');
    alert(val);
  });

but without any luck.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

飘落散花 2024-10-07 06:05:05

如果您查看最接近的文档，您会看到它说它找到了祖先..

描述：获取第一个祖先
与选择器匹配的元素，
从当前元素开始并且
在 DOM 树中向上前进。

您的情况下的输入不是 .delete 链接的祖先。

您需要使用 .closest('tr') 向上移动，然后使用 .find('input') 向下钻取以查找输入，

因此

var val = $(this).closest('tr').find('input').val();

If you look at the documentation for closest you will see that it says that it finds ancestors ..

Description: Get the first ancestor
element that matches the selector,
beginning at the current element and
progressing up through the DOM tree.

the input in your case is not an ancestor of the .delete link.

You need to move up with .closest('tr') and then drill down to find the input with .find('input')

var val = $(this).closest('tr').find('input').val();

回复收藏 0 原文

无需解释 2024-10-07 06:05:05

closest 函数的名称极具误导性：它实际上是返回的最近的祖先。

正确的代码是：

var value = $(this).parent().siblings('td').children('input').val();

我不建议将事件处理程序绑定到 alllllllll 锚标记；如果页面上有很多这样的元素，这将是低效的。相反，我强烈建议使用 delegate() 或 live() 代替。

$('#objects').delegate('a.delete', 'click', function (e) {
    e.preventDefault();
    var val = $(this).parent('td').siblings('td').find('input').attr('value');
    alert(val);
});

这会将事件处理程序绑定到 table （一次），然后使用 JavaScript 事件冒泡机制来检测与第一个参数中传递的选择器匹配的元素的单击（在本例中为删除按钮））。

The name of the closest function is extremely misleading: it's actually the closest ancestor that is returned.

The correct code would be:

var value = $(this).parent().siblings('td').children('input').val();

I wouldn't recommend binding the event handler to alllllllll anchor tags; this will be inefficient if there's a number of those elements on the page. Instead I would strongly recommend using delegate() or live() instead.

$('#objects').delegate('a.delete', 'click', function (e) {
    e.preventDefault();
    var val = $(this).parent('td').siblings('td').find('input').attr('value');
    alert(val);
});

This will bind the event handler to the table (once), and then uses JavaScripts event bubbling mechanisms to detect the click on the elements which match the selector passed in the first argument (in this case your delete buttons).

回复收藏 0 原文

可爱咩 2024-10-07 06:05:05

尝试

$('.delete').click(function (e) {
    e.preventDefault();
    var val = $(this).parent("td").prev().find('input').val();
    alert(val);
});

Try

$('.delete').click(function (e) {
    e.preventDefault();
    var val = $(this).parent("td").prev().find('input').val();
    alert(val);
});

回复收藏 0 原文

北渚 2024-10-07 06:05:05

查看工作演示

你不能在那里使用closest，试试这个

 $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).parent('td').prev('td').find('input').attr('value');
    alert(val);
 });

： parent() 用于返回到链接的父级 td，然后 prev() 用于查找 的上一个同级>td 最后使用 find 方法搜索 input。

更多信息：

See Working Demo

You can't use closest there, try this:

 $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).parent('td').prev('td').find('input').attr('value');
    alert(val);
 });

The parent() is used to go back to parent td of the link and then prev() is used to find the previous sibling of td and finally with find method, input is searched for.

More Info:

回复收藏 0 原文

~没有更多了~