jQuery中如何选取匹配指定选择器的元素之后的目标类型元素

原代码错误原因 #

• closest() 是向上遍历祖先元素的方法，你的img嵌套在.image_box内，祖先节点不存在.label_box，因此无法匹配到目标
• nextAll() 仅查找同层级的后续兄弟节点，img的同层级没有对应input元素，因此匹配失效

正确实现代码 #

$("img[src$='sunglasses.jpg']").each(function() {
  // 先找到当前img所属的.image_box容器
  // 再查找该容器后续所有兄弟节点中的.label_box
  // 最后筛选出里面name以happy_开头的input，设置值为1
  $(this).closest('.image_box').nextAll('.label_box').find("input[name^='happy_']").prop('value', '1');
  
  // 如果只需要匹配第一个后续的对应input，加eq(0)即可：
  // $(this).closest('.image_box').nextAll('.label_box').eq(0).find("input[name^='happy_']").prop('value', '1');
});

逻辑说明 #

按照你给出的HTML结构，img的父容器.image_box和存放input的.label_box是同级兄弟节点，因此先向上找到img所属的.image_box，再遍历该容器的后续兄弟节点，就能准确命中对应的input元素。

内容的提问来源于stack exchange，提问作者Rob