Question

I’m getting a text from server side and I want to show one word for each button click. Here is my approach:

$(document).ready(function() 
            {       
                $.ajax(
                {
                    type: "GET",
                    dataType: 'json',
                    url: "request.php",
                    success: function (response){

                var words = text.match(/\b([a-z]{1,})\b/gi);  //text is an element of json array
                        for (i = 0;  i < 10;  ++i)
                            $("#container").append("<span>"+words[i]+"</span>").hide();
                    }           
                });
            });

My function to display words. It doesn’t work, just for explaining what I’m trying to do.

    $(function() 
    {           
        $("#button").click(function(){
            $("#container span").fadeIn(450);  // shows nothing
        });
    }); 

Jquery selector can’t select the spans because they are not at html. Could you advise me a solution?

(When I wrote $(“#container”).fadeIn(450); it shows all the words.)

Answer 1

There two problems with your code;

You’re using .append() to append span elements to #container but it returns #container jQuery object. So everytime you append a span element you call .hide() for #container. As you can see I changed it a little. You have to create span element, hide it and then append it to #container, like this;

$("<span>"+words[i]+" </span>").hide().appendTo("#container");

Second problem is with your .click() function. Your selector selects all span elements, there is pseudo selectors for selecting hidden elements or first element etc. Using them together you can select first hidden element like this;

$('#container span:hidden:first');

And finally implementing these to your code will give us this result;

$(document).ready(function() {
    $.ajax({
        type: "GET",
        dataType: 'json',
        url: "request.php",
        success: function(response) {
            var words = text.match(/\b([a-z]{1,})\b/gi); //text is an element of json array
            for (i = 0; i < 10; ++i) {
                $("<span>"+words[i]+" </span>").hide().appendTo("#container");
            }
        }
    });
});

$(function() {
    $("#button").click(function() {
        $('#container span:hidden:first').fadeIn(450);
    });
});

But of course, if you want to fadeIn all of your span elements at once you can use your piece of code;

$("#container span").fadeIn(450);

Here is an example of your code.