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

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);
        }
    });

});

这很好,但现在我需要评估一个新的条件.如果组件有manualInputCSS类,我不能设置它的值,但是类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(){

示例JSFiddle