0

作成したばかりのカスタム メニューがあります。

<div class="select_input_wrap">
    <div class="select_input_wrap_left">
        <input class="select_input" type="text" id="search_topics" autocomplete="off" spellcheck="false">
    </div>
    <div class="select_input_wrap_right"></div>
    <div class="clear"></div>
    <div class="select_input_menu" id="search_topics_menu">
        <ul class="custom_select_menu">
            <li>Option 1Option 1Option 1Option 1Option 1Option 1Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>
</div>

誰かが をクリックする<li>と、その中からテキストを取得し、 の前にある最も近いフィールド内に配置したいと考えています<li>。これは私のページの唯一のメニューではないため、 を使用します。それ以外の場合は、特定のクラスまたは ID の入力フィールドに を入力するの$(this)と同じくらい簡単です。.text()

私はこのようなものを試してきました:

$('.custom_select_menu li').click(function() {
    //$(this).closest('.select_input').val($(this).text());
    //$(this).closest('.select_input_wrap').children('input').val($(this).text());
});

しかし、私はそこに着くことができません。誰かがこれを達成する方法を説明できますか?

4

3 に答える 3

3

あなたは正しい軌道に乗っていますがchildren、選択した要素の子孫ではなく子のみを選択しますfind。代わりにメソッドを使用できます。

$('.custom_select_menu li').click(function() {
    $(this).closest('.select_input_wrap').find('input').val($(this).text());
});
于 2013-02-12T02:32:57.017 に答える
1

それにはいくつかの説明が必要です：

LI をクリックすると、ハンドラ関数が LI のコンテキストで実行されます。

したがって、$(this) は、LI を埋め込む jQuery オブジェクトを参照します。

初め：

$(this).closest('.select_input').val($(this).text());

あなた.select_inputは祖先の一部ではないため、機能しません-実際、これはあなたのliの親の親の兄弟の子供です:)。closest()祖先の全行のみを検索します。

第二に：

$(this).closest('.select_input_wrap').children('input').val($(this).text());

children()は最初のレベルの深い子のみを検索するため、どちらも機能しません。find()代わりに使用する必要があり、それは良いことです-任意の深いレベルで再帰的に検索を見つけます

そのため、2 回目の試行を少し変更するとうまくいきます。

$(this).closest('.select_input_wrap').find('input').val($(this).text());
于 2013-02-12T02:37:39.223 に答える
0

このようなものはあなたのために働くでしょうか？

$('.custom_select_menu li').click(function() {
    var field = $(this).parents('.select_input_wrap').find('.select_input');
    field.val($(this).text());
});

デモ: http://jsfiddle.net/ZKnQh/

于 2013-02-12T02:36:53.947 に答える