$(".suggestions-list").on("click", "li", function(e) { e.preventDefault(); $(this).closest(".input-container").find(".input-text").val($(this).text()); //ПРОБЛЕМА $("div.title-new").find(".input-container").closest(".input-text").val($(this).text()); //ПРОБЛЕМА $(this).closest(".suggestions-list").hide(); });

you need to insert text into input-text which is in the title-new block, it’s impossible to do it through the closest, if you do find, then insert all input-text fields on the page, what am I doing wrong?

here is a html piece for which this is all done:

 <div class="title-drom"> <div class="input-container"> <input class="input-text title-suggestion" type="text" value="значение"> <ul class="suggestions-list"> </ul> <div class="input-info"> <span class="is">0</span> / <span class="max">71</span> </div> </div> </div> <div class="title-new"> <div class="input-container"> <input class="input-text insert-titlenew" type="text" value="значение"> <div class="input-info"> <span class="is">0</span> / <span class="max">50</span> </div> </div> </div>

    3 answers 3

    closest looking up the chain of parents. He is not suitable here. You just need to choose this input inside famous parents:

     $("div.title-new .input-container .input-text").val($(this).text());

    Update

     $(this). closest(".title-drom"). next(".title-new"). find(".input-container .input-text"). val($(this).text());
    • Yes, I did, but it works a little differently than I need, it inserts into all the fields found, which can be several on the page - rst630
    • @ rst630 where is the element with the class "title-new", in whose input do you want to write the value? - Igor

    what am I doing wrong?

    Trying to find a .input-container with a class .input-text , whereas in the markup the latter is a child .

    Please read the description of the closest() method in of.documentation .

    As for the code itself, this option also works, and is a bit more logical + readable (albeit 2 lines more):

     $(".suggestions-list").on("click", "li", function(e) { e.preventDefault(); var list = $(this).closest(".suggestions-list"), text = $(this).text(); list.siblings(".input-text").first().val(text); // присвоение соседнему инпуту $("div.title-new .input-text").first().val(text); // присвоение инпуту в #title-new list.hide(); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="title-drom"> <div class="input-container"> <input class="input-text title-suggestion" type="text" value="значение"> <ul class="suggestions-list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> </div> <div class="title-new"> <div class="input-container"> <input class="input-text insert-titlenew" type="text" value="значение"> </div> </div>

    The first() call in this case is not necessary, of course - but theoretically, it can slightly speed up the execution (depends on the jQuery implementation).
    And in my opinion, writing first() in cases when you need to select the first element of the collection, regardless of its size, is a good habit.

    • Fine! I just changed my string to $ ("div.title-new .input-container .input-text"). first (). val ($ (this). text ()); I managed to achieve a change in all fields on the page before, but I did not know how to make the change only in the neighboring field next to which the manipulations occur. Thank you very much! - rst630
    • @ rst630, not at all :) Please tick the accepted answer Igor , where the option you selected is suggested (click on the check mark to the left of his answer). - yar85
    • @ yar85 "You, sir, are a gentleman and a scholar." - Igor

    If I understand correctly, you want that when you click on an element from the list, its value is inserted into the input-text of the title-new block?

     $(".suggestions-list").on('click', function(e){ $('.title-new .input-text').val(e.target.innerHTML); }) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="title-drom"> <div class="input-container"> <input class="input-text title-suggestion" type="text" value="значение"> <ul class="suggestions-list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> </div> <div class="title-new"> <div class="input-container"> <input class="input-text insert-titlenew" type="text" value="значение"> </div> </div>

    • Yes, that's right, but the point is that there may be several such blocks on the page, and you only need to insert it into the closest one - rst630
    • @ rst630 what blocks can be several? blocks with a list? suggesions-list? Formulate more clearly with several blocks to provide the code and where the values ​​should fall. And then you can guess and only - EVG