foreach with jquery element

Question

I would like each "p" element to show upon clicking the button. But it is not not working please help.

<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>

Rusty Fausak · Accepted Answer · 2011-09-27 17:43:37Z

7

$("p").hide();

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

edited Sep 27, 2011 at 17:43

answered Sep 27, 2011 at 16:54

Rusty Fausak

7,5541 gold badge30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen · Accepted Answer · 2011-09-27 16:55:03Z

0

Try using the below code:

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

Or simply

 $('p').show();

Hope this Helps!!

answered Sep 27, 2011 at 16:55

Praveen

1,44916 silver badges25 bronze badges

Comments

Greg Pettit · Accepted Answer · 2011-09-27 17:39:51Z

I would potentially extend it one step further: I assume your example is a reduced and simplified sample for easy conversation. If your application is to have a lot of DOM manipulation (ie. some elements could get destroyed and rebuilt) or if you run into timing issues surrounding the 'click' event being bound, I would use .delegate() to bind the click instead:

$(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();
  }
});

I chose "body" as the listener simply because I don't know your page contents. The best listener is the nearest parent that is at no risk of being destroyed, often a wrapper div of some sort. Swap out "body" for a more specific selector if you can.

Here's the difference:

.click() : "Grab this specific element and ask it to listen for clicks on itself." .delegate(): "Grab a parent-level object and ask it to listen for clicks on any element matching the designated selector."

.delegate() might be "overkill" for some purposes, but I use it whenever I can because it is much more future-proof.

Ady Ngom · Accepted Answer · 2011-09-27 17:58:49Z

0

Here is the javascript that will show one at a time with the HTML you have

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;  
});

look at the example on jsfiddle to view the HTML and CSS http://jsfiddle.net/Cvm68/

answered Sep 27, 2011 at 17:58

Ady Ngom

1113 bronze badges

1 Comment

Ady Ngom Over a year ago

I know you have chosen @rfausak answer which is great if you want to show all of them after the first click, but I'm afraid that it will fail to show one at a time since that each loop will run until all elements have been changed. Positively :)

Collectives™ on Stack Overflow

foreach with jquery element

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related