找到一個div並顯示

我有多個div與頁面上具有相同類的另一個div所打開的同一個類。每次我只嘗試打開一個div時，所有div的顯示都是因爲我正在使用一個類。我將如何編寫jQuery來查找要顯示的div而不顯示所有的div？找到一個div並顯示

<div class="account"> 
<div class="actions"> 
    <div><a href="" class="more">More Info</a></div> 
</div><!-- /actions --> 
<div class="info>This info would be show for more info</div> 
</div><!-- /account --> 

<div class="account"> 
<div class="actions"> 
    <div><a href="" class="more">More Info</a></div> 
</div><!-- /actions --> 
<div class="info>This info would be show for more info</div> 
</div><!-- /account -->

來源

2011-04-22 pertrai1

你試圖展示什麼div？你已經做了什麼不起作用？你的javascript看起來像什麼？多一點信息會有很長的路要走。 – szeliga 2011-04-22 14:04:55

我不知道這是你的生活代碼，但只是FYI它是無效的，因爲關閉的引號丟失掉'類=「信息>'，這將在輸出引入錯誤。 – 2011-04-22 14:23:11

：

$("a.more").click(function(){ 
    $(this).closest(".account").find(".info").toggle(); 
    return false; 
});

與許多其他答案的區別是closest它找到最匹配的選擇器的父母。我更喜歡.parent().parent().parent()方法，因爲它爲將來的標記更改提供了最大的靈活性。只要.account容器內有.info，你就很好。

來源

2011-04-22 14:08:31

試試這個：

$("div.account a.more").click(function() { 
    $(this).parent().parent().parent().children("div.info").show(); 
    return false; 
});

這將顯示「信息」的div是一樣的「帳戶」 DIV作爲內部鏈接。

對於一個更加靈活，但效率較低的方法，你也可以這樣做：

$("div.account a.more").click(function() { 
    $(this).parents("div.account").first().children("div.info").show(); 
    return false; 
});

的jsfiddle演示：http://jsfiddle.net/Ma28E/

來源

2011-04-22 14:06:20

要麼給每個div的一個唯一的ID，或給予他們一個以上類，這樣任何一個div的類集都是唯一的。

來源

2011-04-22 14:06:20

當你有你.click寄存器中找到你的.info元素相對於$(this)

$(".more").click(function(){ 
    $(this).parents(".account:first").find(".info").toggle(); 
});

Code example on jsfiddle

來源

2011-04-22 14:07:25

我傾向於做使用下面的代碼

$('div.actions').find('a').click(function(e) 
{ 
    $(this).parents('div.actions').next('.info').show(); 
}

來源

2011-04-22 14:10:50 VoteyDisciple

保存此上一個新的文件：

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

     <script> 
      $(document).ready(function() { 
       $("#bt_action1").bind("click", function() { 
        $($(".account")[0]).toggle(); 
       }) 
       $("#bt_action2").bind("click", function() { 
        $($(".account")[1]).toggle(); 
       }) 
      }) 
     </script> 
    </head> 
    <body> 

     <div class="account"> 
      <div class="actions"> 
       <div><a href="" class="more">More Info 1</a></div> 
      </div><!-- /actions --> 
      <div class="info">This info would be show for more info</div> 
     </div><!-- /account --> 

     <div class="account"> 
      <div class="actions"> 
       <div><a href="" class="more">More Info 2</a></div> 
      </div><!-- /actions --> 
      <div class="info">This info would be show for more info</div> 
     </div><!-- /account --> 

     <form> 
      <input type="button" id="bt_action1" value="Show/Hide 1" /> 
      <input type="button" id="bt_action2" value="Show/Hide 2" /> 
     </form> 
    </body> 
</html>

這個代碼的關鍵是jQuery對象的變化，DOM對象，jQuery的了，所以你可以找到返回的集合中的任何DIV類選擇：

$($(".account")[0]).toggle();

（提醒的是集合具有索引0開始，所以第二項具有索引1等toggle()節目或交替隱藏DIV）。

來源

2011-04-22 14:25:30 Niloct

找到一個div並顯示

回答

相關問題