JQuery показывает ВСЕ DIVs в таблице, хотят отображать только div после ссылки

Question

Я не могу понять, как выбрать непосредственный div внутри каждого тд и загрузить страницу.Everylink переключает каждый скрытый div!

Таблица содержит 100 строк.Каждая строка имеет часть, которую можно увидеть, которая является ссылкой.А потом я включил div, который скрыт внутри каждого ряда.Я просто хочу, чтобы ссылка в каждой строке отображала непосредственный div под ним, теперь каждый из них.

мой html настроен так:

<div id=container>
<div id=box>
<table>
<tr><td><a href=link></a>
<div id=page class=hidden></div></td></tr>
</table>
</div>
</div>

и jquery делает это:

$(document).ready(function() {
$("td a").click(function() {
  var myUrl = $(this).attr("href");
  $("#page").load(myUrl);
  $(this).toggle();
  return false;
});
$(".hidden").hide();
});

Answer 1

Ваш код $(this).toggle(); переключает видимость ссылки, а не div, следующего за ней.

Замените эту строку на $(this).next('div').toggle();, и все будет в порядке.

Answer 2

Попробуйте что-то вроде этого:

$("td a").click(function(e){
     e.preventDefault();
     $(this).closest("td").find("#page1").load($(this).attr("href"));
});

Answer 3

У элементов должны быть уникальные идентификаторы, поэтому вам придется использовать класс, чтобы идентифицировать повторяющиеся div и присваивать им уникальные идентификаторы!

что-то вроде этого должно сработать:

<div id=container>
    <div id=box>
        <table>
           <tr><td><a href=link></a>
                   <div id="page1"  class="hidden page"></div>
               </td>
           </tr>
        </table>
     </div>
</div>


$(document).ready(function() {
    $("td a").click(function(e) {
         $(".hidden").hide(); //hide all the divs at first.
          e.preventDefault(); //stop the link from being followed
          var myUrl = $(this).attr("href"); 
          $(this).siblings('div.page').load(myUrl).show();  //get the div and load it, then show it

          return false;
    });


});

Answer 4

Используйте селектор

$('td > div.hidden') // to get the first div with the hidden class in td