Question

我有以下示例HTML代码：

<tr>
    <td align="center" headers=" " class="data"><input type="checkbox" name="the-id" value="4222816"></td>
    <td headers="HDR1" class="data">RED</td>
    <td headers="HDR2" class="data">YELLOW</td>
</tr>

基于以上所述，使用jQuery，我希望能够从输入前进到下一个td元素以获取值＆＃34; RED＆＃34;

我认为它应该是这样的：

$("input[value="4222816"]").closest('td')

但不确定如何获得＆＃34; RED＆＃34;

的td值

Answer 1

closest适用于祖先元素。您正在寻找parent().next()：parent前往包含td的{{1}}，然后next转到其后的下一个元素：

input

但是：如果您有多个匹配var text = $('input[value="4222816"]') .parent() .next() .text();的元素，由于jQuery的基于集合的特性，它将为您提供所有的文本。（text在这方面在jQuery世界中是不寻常的。绝大多数jQuery的访问器只会给你集合中第一个元素的值，但是input[value="4222816"]给你的值来自集合中的所有元素。）

因此，如果您有多个匹配元素，则需要缩小选择器或将其缩小为一个元素。

这是一个通过.first使用第一个匹配元素的示例;但如果只有一场比赛，你就不需要这样做了：

＆＃13;

text

＆＃13;

$("#result").text(
  $('input[value="4222816"]')
    .first()
    .parent()
    .next()
    .text()
);

＆＃13;

如果你需要更进一步的那个紧接下一个元素，它将是<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody> <tr> <td align="center" headers=" " class="data"> <input type="checkbox" name="the-id" value="4222816"> </td> <td headers="HDR1" class="data">RED</td> <td headers="HDR2" class="data">YELLOW</td> </tr> <tr> <td align="center" headers=" " class="data"> <input type="checkbox" name="the-id" value="4222816"> </td> <td headers="HDR1" class="data">BLUE</td> <td headers="HDR2" class="data">GREEN</td> </tr> </tbody> </table> <p>The text of the target <code>td</code> is: <span id="result"></span></p>而不是.nextAll("some-selector").first()。（注意：不要被.next()选择带有选择器的事实所迷惑。它没有找到下一个匹配元素。它要么找到下一个元素，如果它匹配，要么找不到它没有按＆＃39;。T）

Answer 2

使用此命令

$("input[value="4222816"]").parent().next().text()

parent()

parent（）方法遍历DOM树中每个元素的直接父元素
next()获得下一个兄弟郎

.next（）方法允许我们在DOM树中搜索这些元素的紧随其后的兄弟

使用jQuery在输入标记下获取元素的td值

2 个答案: