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

Question

我是 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");

它不起作用，因为 next 只在 sibling 中搜索......

你能给我一个提示吗？

谢谢!

Answer 1

最简单的选择是转到一个公共(public)父元素(在本例中为表格行)，然后返回到您想要的元素:

$(".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")) 

但主要只是改变语法。