Question

这里的总noob，试图有条件地将一些值附加到html对象。这是根据我发现的示例代码构建的，所以要善待......

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

您不必将它们全部链接在一起：

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

在$ .each

之后构建你想要附加在字符串中的内容并附加它也被认为是一种好习惯。

Answer 2

jQuery的append方法接受多个元素，包括如：

中的空对象

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

相当于

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

请注意，在最终的DOM元素中只会忽略null个对象。

因此，您可以按如下方式调整代码：

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

附加到div的第三个元素是img元素或null，具体取决于this.picture的定义。

Answer 3

jQuery只是一个JavaScript库。你还在使用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

尝试这样的事情：

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

在jquery中使用条件语句追加

4 个答案: