Question

我遇到了一个让我高兴的解决方案。

我正在处理一些复合组件，而我无法完全控制它们，现在我必须使用JavaScript为它们设置值，我认为JQuery会为我服务好吧，就像它一样。

组件的HTML输出具有与此类似的结构：

<span id="externalSpan">
    <span id="internalSpan">
        <input type="text" class="component-value" />
    </span>
</span>

所以我所要做的就是检查component-value输入，如果它是空的，我将默认值设置为它。

我解决了这个问题：

$(document).ready(function(){

    var defaultValue = $('#defaultValue').val();

    $('.component-value').each(function(){
        if(!$(this).val()){
            $(this).val(defaultValue);
        }
    });

});

这很好，但现在我需要评估一个新的条件。如果组件具有manualInput CSS类，我无法设置它的值，但是类是在externalSpan上设置的，它是输入的祖父组件，它看起来像这样：

<span id="externalSpan" class="manualInput">
    <span id="internalSpan">
        <input type="text" class="component-value" />
    </span>
</span>

我发现这样做的最简单方法是：

if(!$(this).parent().parent().hasClass('manualInput')){ ... }

它有效，但它看起来真的很臭，另一个解决方案是用类选择器调用parents()并检查length，但它似乎也很奇怪。

我有更清洁的方法吗？如果没有，上面描述的两个选项中的哪一个是更好的解决方案？

Answer 1

所以将支票添加到选择器

$('span:not(.manualInput) > span > .component-value').each(function(){

Example JSFiddle

Answer 2

一个更好的解决方案，使用一个避免.component-value后代的.manualInput元素的选择器：

$('.component-value:not(.manualInput .component-value)').each(...)

理想情况下，祖父母元素将具有一致的类，以便您可以调用.closest()：

if ($(this).closest('.component-value-grandfather').hasClass('manualInput')) {...}

或者你可以检查一下是否有.manualInput祖先：

if ($(this).closest('.manualInput').length) {...}

Answer 3

我会使用closest：

if(!$(this).closest('#externalSpan').hasClass('manualInput')){ ... }

来源：http://api.jquery.com/closest/

Answer 4

你可以这样做 -

if($(this).closest('.manualInput').length > 0){ 
   // do your stuff
}

Answer 5

我推荐以下

$('span:not(.manualInput) > span').find('.component-value:empty').each(function () {
    $(this).val(defaultValue);
});

或者更好，

$('.component-value:empty', 'span:not(.manualInput) > span').val(defaultValue);

可能是缩短了一段代码来实现你想要的。

Answer 6

或者你可以使用

if ($(this).parents('.manualInput').length) {/*...*/}

请参阅jquery documentation。我想这是找到给定元素的父级的最短路径

使用JQuery查询父类的最简洁方法

6 个答案: