获取父div的第二个子项？
获取父div的第二个子项？
提问于 2020-08-26 03:18:23
我基本上有了这个生成的html，我需要进入input元素(div的第二个子元素)并获取他的值。
我从第一个子按钮开始，通过使用var parent = $(elem).closest("div"); (这是通过onClick事件调用的javascript函数)，我设法找到了父<div>。
然后，我将父元素保存在一个变量中，现在我正在尝试获取没有结果的第二个元素。我试了所有的方法，但我就是不能进入那里，即使是closest()从第一个按钮开始。
我不能使用任何id或任何类似的东西来搜索元素，我需要通过导航DOM到达那里，有什么解决方案吗？
<div class="px-3" id="' . $row["idEvent"] . '">
<button type="button" class="btn bg-light border rounded-circle"><i class="fas fa-minus" onClick="decreaseQuantity(this)"></i></button>
<input type="text" class="form-control w-25 d-inline" value="' . $row["TicketQuantity"] . '">
<button type="button" class="btn bg-light border rounded-circle"><i class="fas fa-plus"></i></button>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-26 03:31:06
function decreaseQuantity(e){
var closestdiv = jQuery(e).parent();
var inputval = closestdiv.find('input').val();
alert(inputval);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="px-3" id="event">
<button type="button" class="btn bg-light border rounded-circle" onClick="decreaseQuantity(this)">Minus<i class="fas fa-minus" ></i></button>
<input type="text" class="form-control w-25 d-inline" value="2">
<button type="button" class="btn bg-light border rounded-circle">Plus<i class="fas fa-plus"></i></button>
</div>
请试一下这个。我希望你能得到你的答案
Stack Overflow用户
发布于 2020-08-26 03:36:30
.closest()将始终向上遍历DOM，直到找到匹配项。
有多种方法可以完成你想要完成的任务。
这里有3种方法
$('button').on('click', function() {
var parent = $(this).parent();
alert(parent.find('input').val());
//OR
alert(parent.children('input').val());
//OR
alert($(this).siblings('input').val());
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="px-3">
<button class=" btn bg-light border rounded-circle">
-
</button>
<input type="text" class="form-control w-25 d-inline" value="value">
<button type="button" class="btn bg-light border rounded-circle">
+
</button>
</div>
只要您没有多个输入字段，此代码就可以很好地工作。如果您有多个input字段，则需要使用class访问input字段。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63585718
复制相关文章
相似问题
腾讯云开发者
