真正的下一个具有特定类的元素

Really next element with specific class

本文关键字：元素 下一个      更新时间：2023-09-26

我是Jquery的新手，很抱歉问了我这个愚蠢的问题。

这是我的HTML代码：

<tr role="row" class="odd">
   <td><input type="checkbox" class="mycheckbox" value="2166"></td>
   <td class="sorting_1">2166</td>
   <td><span class="myparentid">743</span>
   </td><td>0</td>
</tr>

我想从"mycheckbox"元素跳到"myparentid"元素，忽略树结构。在Jquery中，我尝试了一些类似的东西：

var checkedRow = $(".mycheckbox");
var nextelem = checkedRow.next(".myparentid");

它不起作用，因为下一次搜索只在兄弟姐妹中。。。

你能给我一个提示吗？

谢谢！

最简单的选择是向上转到一个公共父元素（在本例中是表行），然后返回到您想要的元素：

$(".mycheckbox").closest("tr").find(".myparentid")
  • https://api.jquery.com/closest/
  • https://api.jquery.com/find/

编辑：添加一些附加信息：

$(".mycheckbox")

是起始位置，位于：tr>td>input.mycheckbox

（其中>表示在html树的正下方）

.closest向上移动树，直到找到匹配的父元素，因此.closest("tr")将找到

<tr role="row" class="odd">

通过查看直接父级"td"，它就是直接父级的"tr"。

通常情况下，我会在这里使用一个类（<tr class="businessobjectcontainer">）（取决于业务对象是什么），然后它可以是div或tr，如果您稍后更改它的这一部分，看到.odd，我会认为这是用于样式设置的，并且会有一个.even，所以这不是理想的选择器。所以"tr"就行了。

.find()执行与.closest相反的操作，并向下树查找匹配元素，在这种情况下，.myparentid将找到：tr>td>span.myparentid

这就是你想要的。

.find()可能不是最高效的，但它可能是最灵活的，因为它意味着你可以随心所欲地移动tr的内容。

一个移动高效的替代方案可能是使用：

$(">td>span.myparentid", $(".mycheckbox").closest("tr"))

但大多数情况下，它只是改变语法。

相关文章：