CODEWITHSUNDEEP
jquery
TheCarver
TheCarver

Reputation: 19713

jQuery select a child from parent of parent of parent

I have this custom menu I've just built:

<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>

When somebody clicks an <li>, I want to grab the text from inside it and place it inside the closest field situated before the <li>. This is not the only menu on my page, hence using $(this), otherwise it would be as easy as putting the .text() in to the input field of a certain class or id.

I have been trying stuff like this:

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

But I just can't get there. Please can somebody explain how to achieve this?

Upvotes: 0

Views: 106

Answers (3)

Ram
Ram

Reputation: 144689

You are on the right track, but children only selects children of the selected element, not descendants, you can use find method instead.

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

Upvotes: 3

MatRt
MatRt

Reputation: 3534

That need some explanations:

When you are clicking on your LI, the handler function is executed with the context of the LI.

So, $(this) refer to the jQuery object embedding your LI.

First:

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

will not work because your .select_input is not a part of ancestors - in fact this a child of a sibling of the parent of parent of your li :). closest() only search on the full line of ancestor.

Secondly:

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

will not work either because the children() is only searching on first level deep of children, so you should use find() instead and that would be good - find search recursively at any deep level

That's why modifying a little your second try will work:

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

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

Would something like this work for you?

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

Demo: http://jsfiddle.net/ZKnQh/

Upvotes: 0

Related Questions