Question

我试图通过输入字段获取关闭的ID，但我只是得到了解开＆＃39;结果是。我已尝试parent(), closest(), find()，但他们都返回undefined。我必须做一些基本错误，因为这不起作用。

PS。这个JS代码在jsFiddle中断，为什么？

<input id="2" class="country-id" type="text" value="NO" />
<span id="3" class="ui-helper"></span>
<input id="4" class="country-name" type="text" value="Norway" />

// JS
$('.country-name').reset(); // <-- this gives error in jsFiddle

$.fn.reset = function() {
    var self = this; 

    $(self).on('click', function(){    
        $(self).val('');   
        //$(self).parent('.country-id').val(''); 
        alert($(self).parent('.country-id').attr('id'));      
    });
}

Answer 1

因为country-id是country-name的兄弟，而不是父母，所以

$(self).siblings('.country-id').attr('id')

演示：Fiddle

此外，您在插件中使用self也存在问题，因为如果您在具有多个元素引用的jQuery对象中调用插件，那么它将失败

$.fn.reset = function () {
    $(this).on('click', function () {
        $(this).val('');
        //$(self).parent('.country-id').val('');
        console.log($(this).siblings('.country-id').attr('id'));
    });
}

Answer 2

您无法使用find()，因为'.country-id'不是.country-name的后代。

您也无法使用parent()或closest()，因为.country-id不是.country-name的祖先。

.country-id和.country-name是兄弟姐妹，因此您必须使用siblings()：

$.fn.reset = function() {
  var self = this; 

  $(self).on('click', function(){    
    $(self).val('');   
    alert($(self).siblings('.country-id').attr('id'));      
  });
}

此外，$('.country-name').reset()会出错，因为您在reset方法定义之前调用它。您在定义reset方法后调用它：

$.fn.reset = function() {
  ...
}

$('.country-name').reset();

Answer 3

这很好用

$('.country-name').on('click', function(){    
            $(self).val('');    
            //$(self).parent('.country-id').val('');
            alert($('.country-name').closest( "input" ).attr('id'));      
        });

为什么点击时未定义.attr（'id'）？

3 个答案: