Форум

asp_ · #1 (**permalink**) 06.12.2011, 23:26

Приветствую всех! Вопрос такой:

как с помощью JQuery найти (и обратиться) к элементу следующему за элементом с заданным классом?

Вот что я делал

$('.ahref').click(function(){			

  $nextEl = $(this).nextAll('.divc:first');	
  $nextEl.css('display','block');	  // выполняем нужные действия
  ....

<a class = "ahref" href = "javascript://" >Show1</a>
 	<div style = "display: none" class = "divc">text1 text1 text1</div>
	<a class = "ahref" href = "javascript://" >Show2</a>
	<div class = "divc">text2 text2 text2</div>

Приведенный выше код находит первый блок div следующий за ссылкой с классом ahref (т.е. то что мне нужно), НО

В данном случае код работать не будет

<SPAN><a class = "ahref" href = "javascript://" >Show1</a></SPAN>
 	<div style = "display: none" class = "divc">text1 text1 text1</div>
	<a class = "ahref" href = "javascript://" >Show2</a>
	<div class = "divc">text2 text2 text2</div>

Вопрос почему и как сделать так чтобы заработало??

devote · #2 (**permalink**) 06.12.2011, 23:51

нифига не понял что ты конкретно хочешь... получить элемент А ??

asp_ · #3 (**permalink**) 07.12.2011, 00:00

хочу сделать возможность сворачиваемых блоков на странице) вариант такой, есть ссылка с опред. классом (их разумеется может быть сколько угодно) и есть блок, который следует за этой ссылкой. При нажатии на ссылку блок (который идет за ссылкой с классом divc) должен свернуться/развернуться. Для этого мне нужно как-то обратится к блоку который идет за ссылкой на которую нажали...

asp_ · #4 (**permalink**) 07.12.2011, 00:13

В общем вопрос звучит так:
Как выбрать элемент с классом class следующим первым после элемента с классом class2 даже если он не является дочерним.

devote · #5 (**permalink**) 07.12.2011, 00:19

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
        <style type="text/css">
            .div_hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <a class="ahref" href="">ссылка1</a>
        <div class="div_hidden">Скрытый блок1</div>
        <a class="ahref" href="">ссылка2</a>
        <div class="div_hidden">Скрытый блок2</div>
        <a class="ahref" href="">ссылка3</a>
        <div class="div_hidden">Скрытый блок3</div>
        <a class="ahref" href="">ссылка4</a>
        <div class="div_hidden">Скрытый блок4</div>
        <a class="ahref" href="">ссылка5</a>
        <div class="div_hidden">Скрытый блок5</div>
        <a class="ahref" href="">ссылка6</a>
        <div class="div_hidden">Скрытый блок6</div>

<script style="text/javascript">
$(".ahref").click(function(){
	jQuery( this ).next().slideToggle(100);
	return false;
});
</script>

    </body>
</html>

devote · #6 (**permalink**) 07.12.2011, 00:22

<html> 
    <head> 
        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 
        <style type="text/css"> 
            .div_hidden { 
                display: none; 
            } 
        </style> 
    </head> 
    <body> 
        <div><a class="ahref" href="">ссылка1</a></div>
        <div class="div_hidden">Скрытый блок1</div> 
        <div><a class="ahref" href="">ссылка2</a></div>
        <div class="div_hidden">Скрытый блок2</div> 
        <div><a class="ahref" href="">ссылка3</a></div>
        <div class="div_hidden">Скрытый блок3</div> 
        <div><a class="ahref" href="">ссылка4</a></div>
        <div class="div_hidden">Скрытый блок4</div> 
        <div><a class="ahref" href="">ссылка5</a></div>
        <div class="div_hidden">Скрытый блок5</div> 
        <div><a class="ahref" href="">ссылка6</a></div>
        <div class="div_hidden">Скрытый блок6</div> 
  
<script style="text/javascript"> 
$(".ahref").click(function(){ 
    jQuery( this ).parent().next().slideToggle(100); 
    return false; 
}); 
</script> 
  
    </body> 
</html>

asp_ · #7 (**permalink**) 07.12.2011, 00:27

devote,
Большое спасибо) Решение оказалось до боли простым))

Форум

Справочник

Discord чат

Курсы javascript