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

1

私は使用しますclosest：

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

ソース: http://api.jquery.com/closest/

于 2013-06-17T14:47:40.040 に答える
0

または、使用することもできます

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

jquery のドキュメントを参照してください。これが、特定の要素の親を見つける最短の方法だと思います

于 2013-06-17T15:25:18.660 に答える