Помогите с jquery parents()
 

Всем привет, столкнулся с такой проблемой:
Есть дерево, нужно вывести data-id родителя, а он мне выдает data-id самого первого родителя.
Т.е. когда кликаю на "кат 2", по идее должно вывести data-id=1, а выводит 0

$('li').click (function(){
	var id_res = $(this).parents().parents().attr('data-id');
	$('.result').html(id_res);
})

<div class="tree dd" id="nestable" data-id="0">
	<ul class="dd-list add_new_item">
		<li class="dd-item" data-id="1">	кат 1
			<ul class="dd-list">
				<li class="dd-item"  data-id="2" >кат 2</li>
			</ul>
		</li>				
	</ul>
</div>

Пробовал ставить:

.parents()

вместо:

.parents().parents()

Тогда пишет undefined

Не надо плодить темы. По сути все ваши вопрос следовало бы обсуждать в одной единственной, т.к. они взаимосвязаны.

$('li').click (function(event){
  event.stopPropagation(); //останавливаем всплытие 
  var id_res = $(this).parents('[data-id]:first').data('id'); //получаем первого предка с атрибутом data-id, получаем значение этого атрибута
  $('.result').html(id_res);
})

Каюсь, в предыдущей теме я не проверял результат и забыл остановить всплытие, потому событие клик срабатывало на всех li по порядку снизу вверх и результат, соответственно, каждый раз перезаписывался.

P.S. ".parents()" - это все родители, потому ".parents().parents()" - это бессмысленно. Может всё-таки начнёте читать документацию, а не гадать на кофейной гуще?

Извините за назойливость, но у меня опять проблемка.(
Добавляю текст на элемент при нажатии, а он дублируется во все потомки дерева
Не могу по этому поводу ничего найти:(

$("li").dblclick(function(event){
	event.stopPropagation();
	$(this).find('.dd-handle').text('Edit');
});

find - Отыскивает [все] дочерние элементы, которые удовлетворяют указанному выражению.

$(this).find('.dd-handle:first').text('Edit');

:first - Соответствуют первому выбранному элементу..

Взгляните пожалуйста на этот код
 

Не пойму почему 4-ая строка в js не работает :(

$("li").dblclick(function(event){
	event.stopPropagation();
	$(this).find('.dd-handle:first').text('edit - >');
 	$(this).find('[type="text"]:first').value = "123";
});

<li class="dd-item">
	<div class="dd3-content">
		<form id="edit_name" style="float: left;  ">
			<input type="text" name="name_text" value=""/>
			<input type="submit" value="OK"/>
		</form>
	</div>
</li>

Потому что jquery объект - это jquery объект, а dom элемент - это dom элемент. У них разные методы и свойства.

vanilla.js:

this.querySelector('[type="text"]').value = "123";

jquery:

$(this).find('[type="text"]:first').val("123");

Столкнулся с таким методом как

change

Все работает, но кое-что хотелось бы исправить.

$('input[name=name_text]').change(function (){
// код
});

Оно срабатывает только тогда, когда input изменил value.
Можно ли сделать так, чтобы он срабатывал, когда пользователь перестает его редактировать, даже если изменений не произошло ?

Решил сам)
Помог метод

.blur();