Question

我有这段代码：

$("td").on("click", function(){
  var result = $(this).closest('table').siblings('form').find('input[name="inputname"]').attr('value');
  alert(result);
});

td {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td>click</td>
    <tr>
</tbody>
</table>
<form>
<input name = 'inputname' value = "10">
</form>
<form>
<input name = 'inputname' value = "12">
</form>

当您点击click时，它会提醒10。一切正常，10正是我需要得到的。但我不知道为什么我对.siblings('form')感觉不好，因为第二个form也在table的兄弟范围内。虽然我只需要选择form下的table，但只需选择（不是第二个form）。

同样，输出是正确的，在这种情况下，我想要的只是.siblings(form)的替代方案，是吗？

换句话说，如何在jQuery中定义它？

$(this).closest('table')./* next form */.find('input[name="inputname"]').attr('value');

Answer 1

siblings('form')会为您的HTML示例返回两个匹配项。只是因为你通过调用attr来结束链条，你只得到一个结果。正如文档中所述：

.attr()方法仅获取匹配集中第一个元素的属性值。

请注意，siblings也会向后查找匹配项，因此如果您的表格前面有表格，则会在那里查找输入框。

您可以使用next('form').first()代替siblings('form')，以确保只向前看，并且只进行第一场比赛。

Answer 2

你的不好的感觉是正确的。有一天，你的设计师想要将一些元素包装成其他元素，突然程序将停止工作主要原因.siblings("form")很可能不再是form而是<div> {持有form）。

我选择自定义data-*属性：

＆＃13;

$("[data-click]").on("click", function() {
  var target = $(this).data("click");
  var result = $("[data-target='"+target+"']").find("[name=inputname]").val();
  alert(result);
});

＆＃13;

[data-click] { /* how cool is that ;) */
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td data-click="form_1">click</td>
    <tr>
  </tbody>
</table>

<form data-target="form_1">
  <input name = 'inputname' value = "10">
</form>

<form data-target="form_2">
  <input name = 'inputname' value = "12">
</form>

＆＃13;

或许将data-target设置为input元素会更好！

Answer 3

这个怎么样？

＆＃13;

$("td").on("click", function(){
  var result = $(this).closest('table').next('form').siblings('form').find('input[name="inputname"]').attr('value');
  alert(result);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td>click</td>
    <tr>
</tbody>
</table>
<form>
<input name = 'inputname' value = "10">
</form>
<form>
<input name = 'inputname' value = "12">
</form>

＆＃13;

如何在$（this）之后选择下一个元素？

3 个答案: