8

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.

4

3 回答 3

7

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

$(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); 
  }
}); 
于 2013-06-08T07:17:16.907 回答
4

问题在于以下几行:

代替:

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

尝试这个:

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

代替

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

尝试这个:

$(this).siblings('input').val() != ""
于 2013-06-08T07:15:34.023 回答
0

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

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

于 2013-06-08T07:16:06.900 回答