11.11.2016, 02:43
|
|
Аспирант
|
|
Регистрация: 11.10.2010
Сообщений: 60
|
|
|
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;
});
});
|
|
11.11.2016, 03:30
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 214
|
|
eddin, .next('.moveout_body')
$('.moveout_go').on('click', function () {
$(this).next('.moveout_body').slideToggle(200);
});
Последний раз редактировалось Rise, 11.11.2016 в 03:34.
|
|
11.11.2016, 03:42
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Rise,
|
Сообщение от eddin
|
|
удаляю теги BR, то всё работает. Но необходимо, чтобы работало именно с этой вёрсткой.
|
|
|
11.11.2016, 03:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
<!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>
|
|
11.11.2016, 09:25
|
|
Аспирант
|
|
Регистрация: 11.10.2010
Сообщений: 60
|
|
Эх..., неужели нельзя сделать? По сути получается, что при нажатии на "123" надо просто найти ближайший соседний элемент, идущий следующим, с классом moveout_body и сработать на нём. Неужто в Jquery нет такого?
Сообщение от Rise
|
|
пусть span на div заменит и все br удалит они там не нужны)
|
к сожалению, вёрстка должна оставаться изначальной.
рони, ваш последний вариант. Дело в том, что неизвестно количество пунктов. |
|
11.11.2016, 09:33
|
|
Аспирант
|
|
Регистрация: 11.10.2010
Сообщений: 60
|
|
|
Сообщение от Rise
|
|
eddin, ну сделай два некста подряд не тупи...
|
не грубите. а два некста - это очень негибко. там BR может быть иногда больше одного. Да, я написал, что вёрстка должна быть именно такой, но просто рассчитывал, что будет предложен какой-то более универсальный вариант. |
|
11.11.2016, 09:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от eddin
|
|
Неужто в Jquery нет такого?
|
|
Сообщение от рони
|
|
//1 вариант //2 вариант //3 вариант
|
а может и больше вариантов решения
надо только почитать документацию на css и jquery
Последний раз редактировалось рони, 11.11.2016 в 09:50.
|
|
11.11.2016, 09:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
eddin,
варианты 1,2,3 это чуть-чуть исправленные варианта Rise,  может кто-то ещё предложит своё решение?
|
|
11.11.2016, 10:51
|
|
Аспирант
|
|
Регистрация: 11.10.2010
Сообщений: 60
|
|
|
Сообщение от рони
|
а может и больше вариантов решения
надо только почитать документацию на css и jquery
|
Ну CSS я знаю очень хорошо, а jquery читал конечно, но что-то не нашел подходящего варика.
Ещё на ум приходит вариант просто пересчитывать moveout_go и moveout_body, ну и раскрывать тот moveout_body, который будет с таким же индексом, что и moveout_go. Но это каким-то извращением попахивает, да и ресурсоёмкая штука мне кажется получится. |
|
11.11.2016, 10:53
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
|
Сообщение от рони
|
|
может кто-то ещё предложит своё решение?
|
Мне понравился твой вариант, предложенный в другой теме... 
<!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>
Но чем провинились нексты у ТСа, я х/з... 
P.S.
Это не верстка, а черти что! 
|
|
|
|
