点击quantity类输入框获取price类元素值时返回undefined的DOM遍历问题求助

架构老林

2026-4-28

解决jQuery无法获取.price元素内容的问题

我来帮你搞定这个DOM遍历的问题！你代码里的路径确实出错了，咱们一步步修正。

问题根源

你写的$(this).parent('.qty-price')是错误的——当前点击的input.quantity的直接父元素是<span class="qty">，不是.qty-price。这一步找不到元素，后面的closest('.price')自然返回undefined了。

两种可行的修正方案

方案一：通过共同父元素定位

先找到input.quantity和.price的共同父元素.qty-price，再在里面查找.price元素：

$(function() { 
  $('input.quantity').click(function() { 
    var priceContent = $(this).closest('.qty-price').find('.price').html(); 
    alert(priceContent); 
  }); 
});

closest('.qty-price')：从当前元素向上遍历DOM树，找到最近的带有.qty-price类的父元素，比parent()更灵活，哪怕后续DOM层级微调也能适配。
find('.price')：在找到的父元素内部，向下查找.price元素。

方案二：通过兄弟元素定位

因为.price是input.quantity父元素.qty的同级兄弟，所以可以直接通过兄弟关系定位：

$(function() { 
  $('input.quantity').click(function() { 
    var priceContent = $(this).parent('.qty').siblings('.price').html(); 
    alert(priceContent); 
  }); 
});