17.03.2015, 15:16
|
|
Аспирант
|
|
Регистрация: 13.03.2010
Сообщений: 38
|
|
|
Сложности с селекторами
Добрый день!
Есть код
<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();
});
Но он почему-то если выделен вложенный список, удаляет всю родительскую ветку. Как это можно исправить?
Удалять нужно только выделенные чекбоксом элементы списка.
|
|
17.03.2015, 15:31
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,214
|
|
|
Сообщение от 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>
|
|
17.03.2015, 15:39
|
|
Аспирант
|
|
Регистрация: 13.03.2010
Сообщений: 38
|
|
Ksa
Спасибо!
А теперь можешь хотя бы примерно объяснить нубу как это работает?
$('#lasttree :checked').each(function(){
var o=this.parentNode.parentNode;
o.parentNode.removeChild(o);
});
|
|
17.03.2015, 15:41
|
|
Аспирант
|
|
Регистрация: 13.03.2010
Сообщений: 38
|
|
|
И может быть ещё подскажешь, как сделать так, чтобы при выделении родительского чекбокса автоматически выделялись все вложенные?
|
|
17.03.2015, 15:52
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,214
|
|
|
Сообщение от Zuko
|
|
А теперь можешь хотя бы примерно объяснить нубу как это работает?
|
$('#lasttree :checked')
Выбрал все дочерние отмеченные чеки элемента с ИД=lasttree...
each(function(){/**/})
Запустил цикл по выбранным элементам
var o=this.parentNode.parentNode;
Вычислил элемент для удаления
o.parentNode.removeChild(o);
Удалил его. |
|
17.03.2015, 16:06
|
|
Аспирант
|
|
Регистрация: 13.03.2010
Сообщений: 38
|
|
Сообщение от ksa
|
$('#lasttree :checked')
Выбрал все дочерние отмеченные чеки элемента с ИД=lasttree...
each(function(){/**/})
Запустил цикл по выбранным элементам
var o=this.parentNode.parentNode;
Вычислил элемент для удаления
o.parentNode.removeChild(o);
Удалил его.
|
Благодарю!)
И может быть ещё подскажешь, как сделать так, чтобы при выделении родительского чекбокса автоматически выделялись все вложенные? |
|
17.03.2015, 16:09
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от ksa
|
var o=this.parentNode.parentNode;
o.parentNode.removeChild(o);
|
Ну зачем же так писать, когда под рукой jquery?
$(this).closest('li').remove().
Так ниче не накроется если верстальщик обернет все в <div> допустим.
__________________
В личку только с интересными предложениями 
|
|
17.03.2015, 16:27
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,214
|
|
|
Сообщение от 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>
|
|
17.03.2015, 18:02
|
|
Аспирант
|
|
Регистрация: 13.03.2010
Сообщений: 38
|
|
|
Сообщение от ksa
|
|
Например так...
|
Спасибо
А можно ли сделать так, чтобы сверху вниз по вложенности только выделялось?
Например, если родительский список состоит из 2х, а они двое сами по себе выделены - он не выделялся.
А то у меня просто дерево каталогов на основе списка будет  |
|
17.03.2015, 20:15
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,214
|
|
|
Сообщение от 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>
|
|
|
|
