Question

我无法弄清楚如何在每个td中选择立即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 > div.hidden') // to get the first div with the hidden class in td

Answer 3

元素必须具有独特的ID，因此，您必须使用一个类来识别重复的div，并为它们提供unque ID！

这样的事情应该可以解决问题：

<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 a").click(function(e){
     e.preventDefault();
     $(this).closest("td").find("#page1").load($(this).attr("href"));
});

jquery在表中显示所有DIV，只想在链接后显示div

4 个答案: