1
$(".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();
});

нужно вставить text в input-text который в блоке title-new, никак не получается сделать это через closest, если сделать find то вставит на все поля input-text на странице, что я делаю не так?

вот кусок html для которого это все делается:

<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 ответа 3

3

что я делаю не так?

Пытаетесь найти у .input-container родителя с классом .input-text, тогда как в разметке последний является дочерним.

Пожалуйста, ознакомьтесь с описанием метода closest() в оф.документации.


Что касается самого кода - такой вариант и работает, и немного логичнее+читаемее (хоть и на 2 строчки больше):

$(".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>

Вызов first() в данном случае не обязателен, конечно - но теоретически, может чуть ускорить выполнение (зависит от реализации jQuery).
И по-моему, писать first() в случаях когда нужно выбрать первый элемент коллекции независимо от ее размера, это хорошая привычка.

3
  • Отлично! только я просто изменил свою строку на $("div.title-new .input-container .input-text").first().val($(this).text()); добиться изменения во всех полях на странице мне удавалось и раньше, а вот как сделать изменение только соседнего поля рядом с которым происходят манипуляции я не знал. Большое спасибо!
    – rst630
    1 июн 2018 в 15:28
  • @rst630, не за что :) Пожалуйста отметьте принятым ответ Igor, где предложен выбранный Вами вариант (нажмите на галочку слева от его ответа).
    – yar85
    2 июн 2018 в 2:30
  • @yar85 "You, sir, are a gentleman and a scholar."
    – user176262
    2 июн 2018 в 3:16
2

closest ищет вверх по цепочке родителей. Он здесь не подходит. Вам просто надо выбрать этот инпут внутри известных родителей:

$("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());
2
  • да так я делал, но это работает немного иначе чем мне нужно, оно вставляет во все найденные поля, которых может быть несколько на странице
    – rst630
    1 июн 2018 в 15:20
  • @rst630 где находится элемент с классом "title-new", в чей инпут Вы хотите записать значение?
    – user176262
    1 июн 2018 в 15:24
0

Если я правильно понял вы хотите чтоб при клике на элемент из списка его значение вставлялось в input-text блока title-new ?

$(".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>

2
  • Да все верно, но суть еще в том что таких блоков на странице может быть несколько, а вставить нужно только в ближайший
    – rst630
    1 июн 2018 в 15:19
  • @rst630 каких блоков может быть несколько? блоков со списком? suggesions-list ? Сформулируйте более ясно с несколькими блоками чтоли код предоставьте и куда значения попадать должны. А то догадываться можно да и только
    – EVG
    1 июн 2018 в 16:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.