2011-09-27 66 views
1

我希望在點擊按鈕時顯示每個「p」元素。但它不是沒用,請幫忙。foreach with jquery元素

<script> 
$(document).ready(function(){ 
$("p").hide(); 
    $("button").click(function(){ 
      $('p').each(function() { 
       //alert($(this).text()); 
       var abc = $(this).text(); 
       abc.next().show(); 
       }); 
    });  
}); 
</script> 


<button>Toggle</button> 
<p>Hello</p> 
<p>Good morning</p> 
<p>Good after noon</p> 
<p>Good evening</p> 
<p>Good night</p> 

<div></div> 

回答

7
$("p").hide(); 

$("button").click(function(){ 
    $('p').each(function() { 
     if (!$(this).is(":visible")) { 
      $(this).show(); 
      return false; 
     } 
    }); 
}); 
+0

我想1個p元素,顯示HTML和CSS點擊一下 – ktm

+0

@sagarmatha好吧,我更新了我的答案。 –

+0

感謝您的回答 – ktm

0

嘗試使用下面的代碼:

$('p').each(function() { 
      $(this).show(); 
    }); 

或者乾脆

$('p').show();  

希望這有助於!

0

我會潛在擴展它更進一步:我假設你的例子是簡化對話簡化和簡化的示例。如果您的應用程序需要進行大量的DOM操作(即某些元素可能會被銷燬和重建),或者如果遇到圍繞'click'事件綁定的時間問題,我會使用.delegate()來綁定點擊:

$(document).ready(function(){ 
    $("p").hide(); // there are other ways to hide depending on your needs or to avoid FOUC 
    $("body").delegate("button", "click", function() { 
    $("p").show(); 
    } 
}); 

我之所以選擇「身體」作爲聽衆只是因爲我不知道你的網頁內容。最好的傾聽者是最近的父母,他們沒有被破壞的危險,通常是某種包裝師。如果可以的話,換掉一個更具體的選擇「身體」。

這裏的區別:

。點擊():「抓住這個特定的元素,並要求它偵聽本身點擊」 .delegate():「抓住父級對象並要求它監聽與指定選擇器匹配的任何元素的點擊。」

.delegate()出於某種目的可能是「矯枉過正」,但我在任何時候都可以使用它,因爲它更具前瞻性。

0

這裏是一個將展示一個在與HTML時間的JavaScript你有

var hiddenP = $("p:hidden"); 
var howMany = hiddenP.length; 
var pIndex = 0; 
$("button").click(function(evt){ 
    if (pIndex == howMany) 
     return false; 
    $(hiddenP[pIndex]).fadeIn(1000); 
    pIndex +=1; 
}); 

看看上的jsfiddle的例子,查看http://jsfiddle.net/Cvm68/

+0

我知道你已經選擇了@rfausak答案,如果你想在第一次點擊後顯示所有答案,那麼這個答案很棒,但是恐怕它不會一次顯示一個答案,因爲每個循環都會運行直到所有元素都被更改。積極:) –