如何在$(this)之后选择下一个元素？
如何在$(this)之后选择下一个元素？
提问于 2016-03-21 21:59:39
我有这样的代码：
$("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的范围内。虽然我只需要选择在table下的那个table，但是只有那个(而不是第二个form__)。
同样，输出是正确的，在这种情况下，我只想为.siblings(form)提供一个替代方案，对吗？
换句话说，我如何在jQuery中定义这一点？
$(this).closest('table')./* next form */.find('input[name="inputname"]').attr('value');回答 3
Stack Overflow用户
回答已采纳
发布于 2016-03-21 22:06:54
siblings('form')为您的HTML示例返回两个匹配项。只是因为您以调用attr结束了链，所以您只得到了一个结果。如文件中所述：
.attr()方法只获取匹配集合中第一个元素的属性值。
请注意，siblings还会向后查找匹配项，因此如果您在表前面有一个表单，它将在那里查找输入框。
您可以使用next('form').first()而不是siblings('form')来确保只向前看，并且只进行第一次匹配。
Stack Overflow用户
发布于 2016-03-21 22:09:31
你的坏感觉是对的。有一天，您的设计人员希望将一些元素封装到其他元素中，突然程序就会停止工作。
主要原因是.siblings("form")很可能不再是form，而是<div> (持有form)。
我会选择自定义data-*属性：
$("[data-click]").on("click", function() {
var target = $(this).data("click");
var result = $("[data-target='"+target+"']").find("[name=inputname]").val();
alert(result);
});[data-click] { /* how cool is that ;) */
cursor: pointer;
}<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>
也许将data-target设置为input元素将是一个更好的主意！
Stack Overflow用户
发布于 2016-03-21 22:13:10
那这个呢？
$("td").on("click", function(){
var result = $(this).closest('table').next('form').siblings('form').find('input[name="inputname"]').attr('value');
alert(result);
});<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36142422
复制相关文章
相似问题
腾讯云开发者
