problème de sélecteur jquery

Question

J'ai un div qui dans le document de jquery prêt, je le append - en utilisant la syntaxe $("#div id").append('html text') -. Avec 10 ou plus si div éléments enfants

Une fois que cela est fait, j'essaie de vérifier le contenu des divs enfants via alert($(".classname")); et il revient avec:

function(a){if(c.isFunction(a))return this.each(function(b){var d=c(this);d.text(a.call(this,b,d.text()))});if(typeof a!=="object"&&a!==w)return this.empty().append((this[0]&&this[0].ownerDocument||s).createTextNode(a));return c.text(this)}

J'attendu à alerte avec le contenu html de l'enfant et divs pas javascript?

script complet:

<script type="text/javascript">
    $(document).ready(function(){

        // twitter api's base url
        var url="http://search.twitter.com/search.json?callback=?&result_type=recent&q=";
        // we'll store the search term here
        var query = "blah";
        // get the json file
        $.getJSON(url+query,function(json){
            // this is where we can loop through the results in the json object
            $.each(json.results,function(i,tweet){
                // this is where we do what we want with each tweet
                $("#results").append('<div class="tweetBox"><span class="unseen">'+tweet.created_at+'</span><div class="tweetImg"><img src="'+tweet.profile_image_url+'" width="48" height="48" /><a class="overbox" href="http://twitter.com/'+tweet.from_user+'/status/'+tweet.id+'"></a></div>'+tweet.text+' ...said '+((new Date().getTime()/1000/60)-(new Date(tweet.created_at))/1000/60).toFixed(0)+' minutes ago</div>');

            });
        });

        $("#results").height(function(){return $(window).height()-204;});
        alert($(".unseen").html());     
    });
</script>

<div id="results"></div>

Mise à jour: certainement une sorte de condition de course jquery / javascript passe ici, si je remplace l'alerte avec setTimeout(function(){alert($(".unseen").html());},1000); il renvoie le texte attendu. Si je change la pause d'attente à 1 milliseconde, il retourne null encore une fois.

Je ne sais pas d'une solution de contournement « réel » pour cet autre que de coller dans le délai?

Answer 1

appels Ajax (comme $.getJSON) sont faites de manière asynchrone.

Cela signifie que lorsque la sélection de jQuery est fait (en bas du script), la réponse pourrait ne pas être encore reçu (toujours sur le chemin).

Vous devez déplacer tout le code qui dépend des éléments créés à partir de la réponse dans la fonction de rappel (juste après le $.each(...);)

Ex:

$.getJSON(url+query,function(json){
    // this is where we can loop through the results in the json object
    $.each(json.results,function(i,tweet){
        // this is where we do what we want with each tweet
        $("#results").append('<p>this element is created only when the callback is triggered</p>');
    });
    // do stuff here with all your created elements
    alert('found '+$(".unseen").length+' objects');
});

A noter également que les html () fonction retourne le contenu HTML de seulement le premier élément de l'ensemble .

EDIT: fonctionne votre truc de délai d'attente, car il donne l'appel ajax le temps dont il a besoin pour remplir et déclencher la fonction de rappel que les annonces les objets DOM

.

Voir l'exemple de travail .

Answer 2

Essayez

alert($('.classname').html());

Je ne comprends pas pourquoi il est revenu texte de fonction; êtes-vous certain que vous venez d'avoir $('.classname') dans votre appel alert()? Peut-être que vous avez eu $('.classname').html sans () final?