$(".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>
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());
что я делаю не так?
Пытаетесь найти у .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()
в случаях когда нужно выбрать первый элемент коллекции независимо от ее размера, это хорошая привычка.
Если я правильно понял вы хотите чтоб при клике на элемент из списка его значение вставлялось в 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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Делаю первое приложения на Apach Cordova (Visual Studio 2017), пытаюсь открыть сайт и нажать на нём на кнопку:
https://githubcom/MadKiev/WebChat не могу доделать, хочу что бы скромный бот отвечал в чате, все попытки мои провалились, помогите пожалуйста!) сначала я пытался...
Задача вывести html код в Google таблице для проигрывания музыки, и чтобы через несколько секунд этот код закрывалсяПока сделал так: Сам скрипт
Ребят, кто может сказать почему модальное окно не открывается на мобильнике?