如何选择父级兄弟节点的子节点

Question

HTML：

<div class="parent"> 
  <input></input> 
  <button></button> 
</div> 
<div class="siblings"> 
  <p class="children"></p> 
</div> 

jQuery:

$('button').click(function(){ 
  if($(this).siblings('input') != ""){ 
    var addTo = $(this).siblings('input').val(); 
    $(this).parent('parent').siblings('siblings').children('children').html(addTo); 
  } 
}); 

为什么不起作用？我想要获取输入框的值，并替换p标签中的内容。

- Roy

Answer 1

您引用了类选择器，但却像元素一样使用它们（缺少点号：.），因此您可能需要将其更改为以下内容：

$(this).parent('.parent').siblings('.siblings').children('.children').html(addTo); 

但是还有一些其他奇怪的东西，你最终也需要修复。像其他人指出的那样，你的 if 语句 (if($(this).siblings('input') != ""){) 总是会评估为 true，我猜你是想判断它的值是否为空？

这里是一个完整且可行的重写，供您参考：

$('button').click(function(){
  var input = $(this).siblings('input'),
      val = input.val();
  if(val != ""){ 
    $(this).parent('.parent').find('.children').html(val); 
  }
}); 

- arnorhs

Answer 2

问题出在以下几行代码：

改为：

$(this).parent('parent').siblings('siblings').children('children').html(addTo);

试试这个：

$(this).parent().siblings('.siblings').find('.children').html(addTo);

代替

$(this).siblings('input') != ""

试试这个：

$(this).siblings('input').val() != ""

- Chubby Boy

---

好的，它可以工作，谢谢。在替换内容之后，我想清除输入值，怎么做？只需使用 $(this).siblings(.input).val() = ""; - Roy

$(this).siblings('input').val('') - Chubby Boy

Answer 3

你可以通过DOM遍历（父级、子级和兄弟）来实现，但我建议给你的元素赋予ID，以便它们在页面上可以被唯一识别。

您当前的方法非常脆弱，如果更改页面结构，可能会导致错误，而基于ID的方法则不会。

- apchester

---

所以我的页面有很多相同的项目，比如产品01、产品02，如果我使用ID，每个项目都必须有一个ID。 - Roy

是的，每个元素都应该附带一个唯一的ID。这将使您的JavaScript编写起来更加容易！ - apchester