Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Сложности с селекторами (https://javascript.ru/forum/jquery/54439-slozhnosti-s-selektorami.html)

Zuko 17.03.2015 15:16
Сложности с селекторами
 
Добрый день!

Есть код 
<ul class="ul-tree ul-drop" id="lasttree" style="display:block">
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	
<li><p>Duis leo.<input type="checkbox" id="checkbox1"/></p></li>

</ul>

<div> <button id="button-del">Удалить выбранные элементы</button>


Пытаюсь удалить выделенные чекбоксами ветки с помощью 

//Удаление отмеченных чекбоксов
	$("#button-del").click(function(){
	
		 $('li:has(input:checked)').addClass('to-del');
		 
		 $('li.to-del').detach();
		
		
	});


Но он почему-то если выделен вложенный список, удаляет всю родительскую ветку. Как это можно исправить?

Удалять нужно только выделенные чекбоксом элементы списка.

ksa 17.03.2015 15:31
Цитата:
Сообщение от Zuko
Удалять нужно только выделенные чекбоксом элементы списка.
Так?

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#button-del').click(function(){
		$('#lasttree :checked').each(function(){
			var o=this.parentNode.parentNode;
			o.parentNode.removeChild(o);
		});
	});
});
</script>
</head>
<body>
<ul class="ul-tree ul-drop" id="lasttree" style="display:block">
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Duis leo.<input type="checkbox" id="checkbox1"/></p></li>
</ul>
<button id="button-del">Удалить выбранные элементы</button>
</body>
</html>

Zuko 17.03.2015 15:39
Ksa

Спасибо!

А теперь можешь хотя бы примерно объяснить нубу как это работает? 

$('#lasttree :checked').each(function(){
            var o=this.parentNode.parentNode;
            o.parentNode.removeChild(o);
        });

Zuko 17.03.2015 15:41
И может быть ещё подскажешь, как сделать так, чтобы при выделении родительского чекбокса автоматически выделялись все вложенные?

ksa 17.03.2015 15:52
Цитата:
Сообщение от Zuko
А теперь можешь хотя бы примерно объяснить нубу как это работает?
 
$('#lasttree :checked')

Выбрал все дочерние отмеченные чеки элемента с ИД=lasttree...
each(function(){/**/})

Запустил цикл по выбранным элементам
var o=this.parentNode.parentNode;

Вычислил элемент для удаления
o.parentNode.removeChild(o);

Удалил его.

Zuko 17.03.2015 16:06
Цитата:
Сообщение от ksa (Сообщение 361726) 
$('#lasttree :checked')

Выбрал все дочерние отмеченные чеки элемента с ИД=lasttree...
each(function(){/**/})

Запустил цикл по выбранным элементам
var o=this.parentNode.parentNode;

Вычислил элемент для удаления
o.parentNode.removeChild(o);

Удалил его.
Благодарю!)

И может быть ещё подскажешь, как сделать так, чтобы при выделении родительского чекбокса автоматически выделялись все вложенные?

danik.js 17.03.2015 16:09
Цитата:
Сообщение от ksa
var o=this.parentNode.parentNode;
o.parentNode.removeChild(o);
Ну зачем же так писать, когда под рукой jquery?

$(this).closest('li').remove().

Так ниче не накроется если верстальщик обернет все в <div> допустим.

ksa 17.03.2015 16:27
Цитата:
Сообщение от Zuko
как сделать так, чтобы при выделении родительского чекбокса автоматически выделялись все вложенные?
Например так...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#button-del').click(function(){
		$('#lasttree :checked').each(function(){
			var o=this.parentNode.parentNode;
			o.parentNode.removeChild(o);
		});
	});
	$(':checkbox').click(function(){
		$(this.parentNode.parentNode).find(':checkbox').prop('checked',this.checked);
		var oli=$('li');
		for (var i=oli.length; i>0; i--) {
			var o=oli.eq(i-1);
			var n=o.find('ul > li :checkbox').length;
			if (n>0) {
				var ok=o.find('ul > li :checked').length;
				o.children('p').find(':checkbox').prop('checked',n==ok);
			};
		};
	})
});
</script>
</head>
<body>
<ul class="ul-tree ul-drop" id="lasttree" style="display:block">
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Duis leo.<input type="checkbox" id="checkbox1"/></p></li>
</ul>
<button id="button-del">Удалить выбранные элементы</button>
</body>
</html>

Zuko 17.03.2015 18:02
Цитата:
Сообщение от ksa (Сообщение 361739)
Например так...
Спасибо

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

Например, если родительский список состоит из 2х, а они двое сами по себе выделены - он не выделялся.

А то у меня просто дерево каталогов на основе списка будет :)

ksa 17.03.2015 20:15
Цитата:
Сообщение от Zuko
А можно ли сделать так, чтобы сверху вниз по вложенности только выделялось?
Разумеется. :D 

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#button-del').click(function(){
		$('#lasttree :checked').each(function(){
			var o=this.parentNode.parentNode;
			o.parentNode.removeChild(o);
		});
	});
	$(':checkbox').click(function(){
		$(this.parentNode.parentNode).find(':checkbox').prop('checked',this.checked);
/*
		var oli=$('li');
		for (var i=oli.length; i>0; i--) {
			var o=oli.eq(i-1);
			var n=o.find('ul > li :checkbox').length;
			if (n>0) {
				var ok=o.find('ul > li :checked').length;
				o.children('p').find(':checkbox').prop('checked',n==ok);
			};
		};
*/
	})
});
</script>
</head>
<body>
<ul class="ul-tree ul-drop" id="lasttree" style="display:block">
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
		<ul>
			<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
			<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
				<ul>
					<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
					<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><p>Duis leo.<input type="checkbox" id="checkbox1"/></p></li>
</ul>
<button id="button-del">Удалить выбранные элементы</button>
</body>
</html>

danik.js 18.03.2015 06:29
Цитата:
Сообщение от ksa
var o=this.parentNode.parentNode;
o.parentNode.removeChild(o);
Ну зачем же так писать, когда под рукой jquery?

$(this).closest('li').remove().

Так ниче не накроется если верстальщик обернет все в <div> допустим.

ksa 18.03.2015 08:20
danik.js, ты это будешь писать после каждого моего сообщения? :D

Zuko 18.03.2015 14:16
KSA

Спасибо огромнейшее!)


Часовой пояс GMT +3, время: 09:31.