@zhuravlev125

Как получить значение текущего элемента(this)?

Имеется кнопка по которой создается div содержащий - table, input-поле и button. По нажатию с Inputa добавляются строки в таблицу с его содержимым. Подскажите как можно получить значение inputa того блока в котором он находится ? а то выходит что если больше 2-го блока, то добавляется только к первому все. С использованием id все получается но насколько знаю, они ведь должны быть все время уникальны. Подскажите как лучше решить этот вопрос. Пробовал так, var valueOfTask = $(this).closest("input") - не выходит
  • Вопрос задан
  • 672 просмотра
Решения вопроса 1
@KnightForce
Не до конца понял, откуда ты хочешь получать.
По клику или как.
Как я понял, тебе нужно узнать значение input, независимо от количества таких же div.
Если по событию, то как-то так:
Допустим у всех кнопок ADD есть класс buttonAdd.
Покажу пример с обработчиком на body и делегированием.
var body=$("body");

body.on("click", function(e){
   var bittonAdd=$(e.target).closest(".buttonAdd");
   if(!bittonAdd.length) return false;
/*
проверка длины нужна, потому что hasClass проверяет наличие класса, а closest, если не найдет подходящего родителя вернет пустой объект (который при преобразовании к булеву типу будет true).
*/
   var div = bittonAdd.closest("div");//Если у div есть класс, то bittonAdd.closest(".имяКласса");
   var input = div.find("input");
   var value = input.val();//Это и есть значение.
//Добавить в таблицу:
  div.find("table").append("<tr><td>"+value+"</td><td>здесь твои кнопки<td><tr>");
/*
Не children, если input прямой потомок, то можно children, но если нет - то он его не найдет
*/
});


Подробно расписал, чтобы было понятно.

Для ускорения работы, можешь сделать шаблон строки для таблицы:
body.on("click", function(e){
   var bittonAdd=$(e.target).closest(".buttonAdd");
   if(!bittonAdd.length) return false;
   var div = bittonAdd.closest("div");
   var value = div.find("input").val();//Это и есть значение.
   var tr = hideLine.clone(true);
   tr.find("td").eq(0).text(value);
   div.find("table").append(tr);
});

//тот самый шаблон:

var hideLine = $("<tr><td></td><td>здесь твои кнопки<td><tr>");
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы