Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   siblings в таблице (https://javascript.ru/forum/jquery/31293-siblings-v-tablice.html)

Avel Mink 02.09.2012 00:20

siblings в таблице
 
Здравствуйте, есть такая проблема. Вот скрипт
$(document).ready(function(){
/* Start DocumentReady */
$("a.hideBtn").click(function(){
$(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
return false;
});
/* End DocumentReady */
});


он прекрасно работает в такой конструкции
<a class="hidebtn" href="javascript://" title="Показать\Скрыть блок">Показать</a>
<div class="hideCont" style="display:none">Бла бла бла текст</div>


но если поместить в таблицу, то скрипт прекращает работать
<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" на какую-то другую, но так и не понял на какую.

Deff 02.09.2012 00:49

Avel Mink,
1. Элемент <a class="hidebtn" идёт певым в ячейке (или могут и до него быть) в данной td элементы ?

2. Элемент <div class="hideCont" всегда в иной ячейке,
чем <a class="hidebtn" ? (Или они могут быть и в одной ?
3. Я так понимаю что ищем в табле следущий ближайший к "hidebtn" - class="hideCont" ?

Deff 02.09.2012 01:59

1. элемент <a class="hidebtn" href="javascript://" title="Скрыть блок">Показать</a>
идёт первым в ячейке (текст не в счёт

2. ищем в табле ближайший элемент, ниже Кликнутого "hidebtn" - у которого: class="hideCont"

3. В табле с кликабельным элементом "hidebtn" - нет дочерних таблиц ( Табла родитель - может и быть

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>


<table>
<tr>
   <td>
	<div class="hideCont" style="display:none">sadas 0</div>
   </td>
</tr>

<tr>
   <td>
   	<a class="hidebtn" href="javascript://" title="Скрыть блок">Показать</a>
   </td>
</tr>

<tr>
   <td>
	<div class="PsevDo-hideCont" style="display:none">sadas</div>
   </td>
</tr>

<tr>
    <td>
		<div class="hideCont" style="display:none">Бла бла бла текст</div>
   </td>
</tr>
</table>




<script type="text/javascript">
$(document).ready(function(){

  $("a.hidebtn").click( function(){
        var tableTd = $(this).parents("table:first").find("td");
        var start = tableTd.index($(this).parent("td"));
        var end = tableTd.length;
        var Td = tableTd.slice(start, end);
        var a = Td.find('div.hideCont').eq(0);
        a.slideToggle('normal');
        if(a.length){
			var z=$(this).text();
			$(this).text($(this).attr("title"));
			$(this).attr("title",z)
        }

      return false;
  });

});
</script>

Avel Mink 02.09.2012 18:30

ох, спасибо огромное, то что надо. Если не сложно - можно сделать чтобы при нажатии, текст ссылки менялся не на title, а на просто указанный html код. При свернутом состоянии - "подробнее + картинка", при развернутом - "свернуть + картинка".


Часовой пояс GMT +3, время: 03:06.