jquery获取兄弟结点的input框内的val值

最新推荐文章于 2024-04-27 18:00:34 发布

原创最新推荐文章于 2024-04-27 18:00:34 发布 · 6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jq

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用jQuery选择器从兄弟节点中获取input元素的值，特别是在动态生成的HTML结构中，如购物车数量增减功能的实现。文章通过具体代码示例展示了正确的选择器用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery获取兄弟结点的input框内的val值

有时候我们可能想在网站上实现一个类似于加减数量的小demo。

我们来看下html代码:

		        <c:forEach items="${arrlist}" var="shop">
					<tr class="text-align" id="shop_"${shop.getShopid()}>
						<td><div><img src="${shop.getUrl()}shop0.png" class="shopping_img"> <p class="text-align">${shop.getName()}</p></div></td>
						<td>${shop.getPrice()}</td>
						<td style="width:15%">
							<div class="number">
							<div class='button1' id='btn${shop.getShopid()}'>-</div>
							<div><input type='text' class='num_input1' id='input${shop.getShopid()}' value="1"></div>
							<div class='button2' id='btn_${shop.getShopid()}'>+</div>
							</div>
						</td>
						<td>${shop.getNum()}</td>
						<td>
						${shop.getPrice()*1}
						</td>
						<td></td>
					</tr>
				</c:forEach>

我们为点击的+和-按钮添加事件，改变inout框的val值，

注意不能用jq的$(this).next().firstChild()找到input标签;

而应该用$(this).next().find("input");找到input标签。可能浏览器在解析的时候没有把input标签当作div的孩子结点。

所以应该在div下find下这个input标签。

	$(".button1").on('click',function(){
		var x1=$(this).next().find("input");
		var y=parseInt(x1.val());
		y-=1;
		x1.val(y);
	})