siblings в таблице

@Avel_Mink · Регистрация: 29.08.2010

Author24 — интернет-сервис помощи студентам

Здравствуйте, есть такая проблема. Вот скрипт

Javascript

$(document).ready(function(){
/* Start DocumentReady */
$("a.hideBtn").click(function(){
$(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
return false;
});
/* End DocumentReady */
});

он прекрасно работает в такой конструкции

HTML5

1 2	<a class="hidebtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont" style="display:none">Бла бла бла текст</div>

но если поместить в таблицу, то скрипт прекращает работать

HTML5

<table>
<tr>
   <td>
    <a class="hidebtn" href="javascript://" title="Показать\Скрыть блок">Показать</a>
   </td>
</tr>
 
<tr>
    <td>
        <div class="hideCont" style="display:none">Бла бла бла текст</div>
   </td>
</tr>
</table>

Нужно сделать именно в таблице, чтобы искался следующий за "hidebtn" блок "hideCont", помогите пожалуйста. Вариант с id не подходит, так как таких блоков будет много и они будут всегда разные.
Подозреваю что надо заменить команду "siblings" на какую-то другую, но так и не понял на какую.

@2Garin · 02.09.2012, 00:55

наверн так

Javascript

1	$(this).toggleClass('show').closest('table').find('div.hideCont').slideToggle('normal');

@Avel_Mink · 02.09.2012, 00:59 **[ТС]**

Сообщение от 2Garin

наверн так

Javascript

1	$(this).toggleClass('show').closest('table').find('div.hideCont').slideToggle('normal');

не работает

@2Garin · 02.09.2012, 02:00

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>tst</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                $("a.hideBtn").click(function(){
                    $(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
                    return false;
                });
 
 
                $("a.test").click(function(){
                    $(this).toggleClass('show').closest('table').find('div.hideBlock').slideToggle('normal');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <a class="hideBtn" href="javascript://" title="Показать\Скрыть блок">Показать</a>
        <div class="hideCont" style="display:none">Бла бла бла текст</div>
 
        <table>
            <tr>
                <td>
                    <a class="test" href="javascript://" title="Показать\Скрыть блок">Показать</a>
                </td>
            </tr>
 
            <tr>
                <td>
                    <div class="hideBlock" style="display:none">Бла бла бла текст 2</div>
                </td>
            </tr>
        </table>
 
    </body>
</html>

@Avel_Mink · 02.09.2012, 04:38 **[ТС]**

такой вариант не подходит, так как если в таблице идет несколько блоков "hideBtn" и "hideCont", то при нажатии на "hideBtn" открываются все блоки "hideCont" в таблице, а мне надо только первый идущий за кнопкой.

@2Garin · 02.09.2012, 21:53

ну тогда если в примере структура верная, то подняться надо то tr, а затем взять следующую строку при помощи .next() и в ней искать .hideCont

@Darevill · 03.09.2012, 01:50

Javascript

$("a.hideBtn").click(function(){
    $(this).toggleClass('show').closest('tr').next().find('div.hideCont').slideToggle('normal');
    return false;
});

@Avel_Mink 0 / 0 / 0 Регистрация: 29.08.2010 Сообщений: 25
	02.09.2012, 04:38 [ТС]	5
	такой вариант не подходит, так как если в таблице идет несколько блоков "hideBtn" и "hideCont", то при нажатии на "hideBtn" открываются все блоки "hideCont" в таблице, а мне надо только первый идущий за кнопкой. 0

@2Garin 7 / 7 / 1 Регистрация: 19.03.2012 Сообщений: 30
	02.09.2012, 21:53	6
	ну тогда если в примере структура верная, то подняться надо то tr, а затем взять следующую строку при помощи .next() и в ней искать .hideCont 0

	03.09.2012, 01:50