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的内容。

Answer 1

您正在引用类的选择器，就好像它们是元素一样（它们缺少点：.） - 因此您可能希望将其更改为：

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

但是那里有很多其他奇怪的东西，你最终也想要修复它们。像其他人指出的那样，你的if语句（if($(this).siblings('input') != ""){）将总是评估为true，我猜你是在试图看它的值是否为空？

这是一个完整的重写fwiw：

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

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() != ""

Answer 3

您可以通过DOM遍历（父母，孩子和兄弟姐妹）来做到这一点，但我建议您提供元素ID，以便在页面上唯一标识它们。

您当前的方法非常脆弱，如果更改页面结构会破坏，而基于ID的方法则不会。

如何选择父母的兄弟姐妹

3 个答案: