JS jquery выбор нужного элемента

187
22 июня 2018, 09:10
$(".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>
Answer 1

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());
Answer 2

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

Пытаетесь найти у .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() в случаях когда нужно выбрать первый элемент коллекции независимо от ее размера, это хорошая привычка.

Answer 3

Если я правильно понял вы хотите чтоб при клике на элемент из списка его значение вставлялось в 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>

READ ALSO
Apache Cordova InAppBrowser.executeScript not working

Apache Cordova InAppBrowser.executeScript not working

Делаю первое приложения на Apach Cordova (Visual Studio 2017), пытаюсь открыть сайт и нажать на нём на кнопку:

170
взаимодействие бота с вебчатом

взаимодействие бота с вебчатом

https://githubcom/MadKiev/WebChat не могу доделать, хочу что бы скромный бот отвечал в чате, все попытки мои провалились, помогите пожалуйста!) сначала я пытался...

161
Как закрыть модальное диалоговое окно?

Как закрыть модальное диалоговое окно?

Задача вывести html код в Google таблице для проигрывания музыки, и чтобы через несколько секунд этот код закрывалсяПока сделал так: Сам скрипт

166
call back на мобильной версии

call back на мобильной версии

Ребят, кто может сказать почему модальное окно не открывается на мобильнике?

181