Удаление и восстанавелние элементов (jquery)
Здравствуйте. Задачи состоит в следующим, есть много элементов с class="j" которые должны удалится после загрузки страницы, и есть элементы с class="c" которые являются соседними элементами с class="j" и при нажатии на которых должно происходить восстановление элементов с class="j", но не всех, а именно тех который являются соседним нажатого элемента class="c".
структура: <div> <div class="c"></div> <div class=j"></div> </div> <div> <div class="c"></div> <div class=j"></div> </div> <div> <div class="c"></div> <div class=j"></div> </div> <script> $(document).ready(function() { var zag1 = $('.j).detach(); $('.c').live('click', function(e){ $(this).parent().append(zag1); }); }); </script> Данный скрипт работает неправильно, он удаляет все элементы с class="j" при загрузке, но при клике на class="c" восстанавливает не соседний удалённый элемент с class="j", а все элементы с class="j". то есть получается вот так: <div> <div class="c"></div> </div> <div> <div class="c"></div> ( элемент по которому кликнули ) <div class=j"></div> <div class=j"></div> <div class=j"></div> </div> <div> <div class="c"></div> </div> а должно получиться вот так: <div> <div class="c"></div> </div> <div> <div class="c"></div> ( элемент по которому кликнули ) <div class=j"></div> </div> <div> <div class="c"></div> </div> Пожалуйста помогите люди добрые, уже несколько дней себе голову ломаю... |
saper333,
так
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid;
}
</style>
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<div class="c">1</div>
<div class="j" id="m">2</div>
</div>
<div>
<div class="c">1</div>
<div class="j">2</div>
<div class="j">3</div>
<div class="j">4</div>
</div>
<div>
<div class="c">1</div>
<div class="j">2</div>
<div class="j">4</div>
<div class="j">3</div>
<div class="j">7</div>
</div>
<script>
$(document).ready(function () {
$('.j').hide();
$('.c').click(function () {
$(this).parent().find('div.j').first().toggle();
})
})
</script>
</body>
</html>
|
:write:
$(function () {
$('.j').hide();
$('.c').click(function () {
$(this).next().toggle();
})
})
|
Большое спасибо за ответы :) . Но к сожалению примеры немного не те. Нужно чтобы элемент полностью исчезал, как с примером .detach(), а с примером hide() но просто становится невидимым.
Думаю без .detach() в этом выражении не обойтись. Есть ли ещё какие ни то мысли по этому поводу :) |
saper333,
удалялся что ли? :) |
saper333,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid;
}
</style>
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<div class="c">1</div>
<div class="j" id="m">2</div>
</div>
<div>
<div class="c">1</div>
<div class="j">2</div>
<div class="j">3</div>
<div class="j">4</div>
</div>
<div>
<div class="c">1</div>
<div class="j">2</div>
<div class="j">4</div>
<div class="j">3</div>
<div class="j">7</div>
</div>
<script>
$(document).ready(function() {
$(".c").each(function(c, a) {
var b = $(a).nextAll(".j").remove().eq(0);
$(a).click(function() {
$(a).nextAll(".j").length ? b.remove() : b.insertAfter(a)
})
})
});
</script>
</body>
</html>
|
Огромное спасибо, все работает :D.
Про такие выражения я даже и не знал :) . Всем спасибо что приняли участие в моей проблеме :) |
saper333,
чуть сократил ещё :) |
Спасибо =). А не подскажите ещё как сделать отложенную загрузку элементов ajax ? :)
|
Цитата:
|
| Часовой пояс GMT +3, время: 03:22. |