0

我很难想出一个让我满意的解决方案。

我正在使用一些复合组件，但我无法完全控制它们，现在我必须使用 为它们设置值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，但这似乎也很奇怪。

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

4

6 回答 6

6

所以将检查添加到选择器

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

示例 JSFiddle

于 2013-06-17T14:46:30.180 回答
1

一个更好的解决方案，使用选择器来避免.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) {...}
于 2013-06-17T14:47:27.120 回答
1

我会使用closest：

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

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

于 2013-06-17T14:47:40.040 回答
1

你可以这样做 - 

if($(this).closest('.manualInput').length > 0){ 
   // do your stuff
}
于 2013-06-17T14:49:33.190 回答
1

我推荐以下

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

或者更好的是，

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

可能是实现您想要的短代码。

于 2013-06-17T14:57:01.283 回答
0

或者你可以使用

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

请参阅 jquery文档。我想这是找到给定元素的父级的最短方法

于 2013-06-17T15:25:18.660 回答