Utilisation d'instructions conditionnelles dans jquery append

Question

Je suis totalement novice et j'essaie d'ajouter conditionnellement des valeurs à un objet html. Ceci est construit à partir d'un exemple de code que j'ai trouvé, alors soyez gentil...

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        $('<div></div>')
        .append('<h1>' + this.from.name + '</h1>')
        .append('<p>' + this.story + '</p>')
        $if (typeof this.picture !== "undefined") {
            .append('<img src="' + this.picture + '">')};
        .appendTo('#facebook')
          });
     });

Answer 1

La méthode de jQuery append accepte plusieurs éléments, y compris des objets nuls comme dans :

$('<div>').append(
    $('<p>').text('First paragraph'),
    $('<p>').text('Second paragraph'),
    null,
    $('<p>').text('Third paragraph')
);

ce qui est équivalent à

$('<div>').append(
    $('<p>').text('First paragraph')
).append(
    $('<p>').text('Second paragraph')
).append(
    null
).append(
    $('<p>').text('Third paragraph')
);

Veuillez noter qu'un null sera simplement ignoré dans l'élément DOM final.

Pour cette raison, vous pouvez adapter votre code comme suit :

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        $('<div></div>').append(
            $('<h1>').html(this.from.name),
            $('<p>').html(this.story),
            (this.picture) ?
                $('<img>').attr('src', this.picture) :
                null
        ).appendTo('#facebook')
    });
});

Le troisième élément ajouté au div est soit le img ou null en fonction de this.picture en cours de définition ou non.

Answer 2

Vous n'avez pas besoin de tout enchaîner :

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        var element = $('<div></div>');
        element.append('<h1>' + this.from.name + '</h1>');
        element.append('<p>' + this.story + '</p>');

        if (typeof this.picture !== "undefined") {
            element.append('<img src="' + this.picture + '">')
        };
        element.appendTo('#facebook');
    });
});

Il est également considéré comme une bonne pratique de construire ce que vous voulez ajouter dans une chaîne et de l'ajouter APRÈS le $.each.

Answer 3

JQuery est juste une bibliothèque JavaScript. Vous travaillez toujours avec JavaScript :

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        var $div = $('<div>');

        $('<h1>', {text: this.from.name}).appendTo($div);
        $('<p>', {text: this.story}).appendTo($div);

        if (this.picture) {
            $('<img>', {src: this.picture}).appendTo($div);
        }

        $div.appendTo('#facebook');
     });
});

Answer 4

Essayez quelque chose comme ça :

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        var $wrapper = $('<div></div>')
            .append('<h1>' + this.from.name + '</h1>')
            .append('<p>' + this.story + '</p>');

        if (this.picture) {
            $wrapper.append('<img src="' + this.picture + '">');
        } else {
            $wrapper.appendTo('#facebook');
        }
    });
});