Jquery, найти ближайший соседний элемент с классом
Добрый день!
Есть простой код. При клике по любому 123 происходит отображение/скрытие всех блоков под ними. Мне же надо, чтобы отображение скрытие было только ближайшего блока, находящегося под 123, на который кликнули. Если я заменяю siblings на next, а также удаляю теги BR, то всё работает. Но необходимо, чтобы работало именно с этой вёрсткой. Подскажите, плз. Вот код <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <ul> <li><br> <span class="moveout_go">123</span><br> <div class="moveout_body">456</div> <br> <span class="moveout_go">123</span><br> <div class="moveout_body">456</div> <br> <span class="moveout_go">123</span><br> <div class="moveout_body">456</div> </li> </ul> </body> </html>
$(function() {
$(".moveout_go").on('click', function(){
var $this = $(this), $moveout_body = $(this).siblings('.moveout_body');
if ($moveout_body.is(":hidden")) {
$moveout_body.slideDown(200);
} else {
$moveout_body.slideUp(200);
}
return false;
});
});
|
eddin, .next('.moveout_body')
$('.moveout_go').on('click', function () {
$(this).next('.moveout_body').slideToggle(200);
});
|
Rise,
Цитата:
|
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.moveout_go').on('click', function () {
//1 вариант
//2 вариант
//3 вариант
});
</script>
</head>
<body>
<ul>
<li><br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
<br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
<br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
</li>
</ul>
</body>
</html>
|
Эх..., неужели нельзя сделать? По сути получается, что при нажатии на "123" надо просто найти ближайший соседний элемент, идущий следующим, с классом moveout_body и сработать на нём. Неужто в Jquery нет такого?
Цитата:
рони, ваш последний вариант. Дело в том, что неизвестно количество пунктов. |
Цитата:
|
Цитата:
Цитата:
надо только почитать документацию на css и jquery |
eddin,
варианты 1,2,3 это чуть-чуть исправленные варианта Rise, :lol: может кто-то ещё предложит своё решение? |
Цитата:
Ещё на ум приходит вариант просто пересчитывать moveout_go и moveout_body, ну и раскрывать тот moveout_body, который будет с таким же индексом, что и moveout_go. Но это каким-то извращением попахивает, да и ресурсоёмкая штука мне кажется получится. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<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>
-->
<style type='text/css'>
.moveout_body {
display: none;
}
</style>
<script type='text/javascript'>
$(function(){
var go=$('.moveout_go');
var bd=$('.moveout_body');
$('.moveout_go').on('click', function () {
//1 вариант
var i=go.index(this);
bd.eq(i).slideToggle(200);
});
});
</script>
</head>
<body>
<ul>
<li><br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
<br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
<br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
</li>
</ul>
</body>
</html>
Но чем провинились нексты у ТСа, я х/з... :D P.S. Это не верстка, а черти что! :-/ |
Или
$(function(){
$('.moveout_go').on('click', function () {
//2 вариант
$(this).nextAll('.moveout_body').eq(0).slideToggle(200);
});
});
|
Цитата:
Цитата:
|
:)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.moveout_go').on('click', function () {
//1 вариант $(this).nextAll('.moveout_body:first').slideToggle(200);
$(' ~ .moveout_body:first', this).slideToggle(200); //2 вариант
//3 вариант $('.moveout_body').eq($('.moveout_go').index(this)).slideToggle(200);
});
});
</script>
</head>
<body>
<ul>
<li><br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
<br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
<br>
<span class="moveout_go">123</span><br>
<div class="moveout_body">456</div>
</li>
</ul>
</body>
</html>
|
Rise, ksa, рони, спасибо, господа! :)
рони, ваш сарказми и иронию оценил :) Блин, ну нет у меня времени погружаться в jquery.((( Вы не представляете как бы я был рад, если бы у меня было время на изучение JS, но это только мечты... Остановился на этих вариантах:
<script>
$(function() {
$(".moveout_go").on('click', function(){
var $moveout_body = $(this).nextAll('.moveout_body').first();
if ($moveout_body.is(":hidden")) {
$moveout_body.slideDown(200);
} else {
$moveout_body.slideUp(200);
}
return false;
});
});
</script>
<script>
$(function() {
$(".moveout_go").on('click', function(){
var moveout_body = $(this).nextAll('.moveout_body').eq(0);
if ($moveout_body.is(":hidden")) {
$moveout_body.slideDown(200);
} else {
$moveout_body.slideUp(200);
}
return false;
});
});
</script>
не знаю какой выбрать, но мне кажется по производительности они на одном уровне, если не так, то помогите с выбором. ps Цитата:
Цитата:
pps Rise и рони что-то не даёт сайт карму поднять, пишет что сначала надо кому-то ещё это сделать. Странная система конечно. |
Цитата:
if ($moveout_body.is(":hidden"))
|
Цитата:
$(function() {
$(".moveout_go").on('click', function(){
var $this = $(this), $mb = $this.nextAll('.moveout_body').eq(0);
$this.toggleClass("top_arr");
$mb.slideToggle(200);
return false;
});
});
А ещё подскажите, плз, имеет ли смысл в данном случае объявлять переменные или лучше всё указать вот так?
$(function() {
$(".moveout_go").on('click', function(){
$(this).toggleClass("top_arr");
$(this).nextAll('.moveout_body').eq(0).slideToggle(200);
return false;
});
});
|
Цитата:
Цитата:
$(function() {
$(".moveout_go").on('click', function(){
$(this).toggleClass("top_arr")
.nextAll('.moveout_body').eq(0).slideToggle(200);
return false;
});
});
|
рони, спасибо!
|
Цитата:
Но цепочка методов вполне допустима. ;) Т.е.
$(function() {
$(".moveout_go").on('click', function(){
var obj=$(this);
obj.toggleClass("top_arr");
obj.nextAll('.moveout_body').eq(0).slideToggle(200);
return false;
});
});
Или
$(function() {
$(".moveout_go").on('click', function(){
$(this).toggleClass("top_arr").nextAll('.moveout_body').eq(0).slideToggle(200);
return false;
});
});
|
Цитата:
|
Хз, вам может уже и не актуально, но может кому пригодится
<div class="carBox"></div>
<div class="carBox"></div>
<div class="carBox"></div>
<div class="carBox"></div>
<div class="paramWrap"></div>
<div class="carBox"></div>
<div class="carBox"></div>
<div class="carBox"></div>
<div class="carBox"></div>
<div class="paramWrap"></div>
<script>
$('.carBox').click(function(){
var i = 0;
infobox = $(this).next('div');
while (i == 0) {
if (infobox.hasClass('paramWrap') != false) {
i = 1;
} else {
infobox = infobox.next('div');
if (!infobox.length) {
i = 1;
}
}
}
$('.paramWrap').removeClass('open');
infobox.addClass('open');
});
</script>
|
| Часовой пояс GMT +3, время: 22:36. |