如果条件得到验证，ajax 附加一些东西

Question

我如何使它工作？

                        var makePage = $('<div />').attr('data-role', 'page').attr('id', 'p'+item.id)
                        .append($('<div>').attr('data-role', 'header')
                        .append('<a href="#"></a>')
                        .append('<img src="images/app/logo.png" id="navImg"/>')
                        .append('<div class="separatore"></div></div>'))
                        .append($('<div />').attr('data-role', 'main').attr('class', 'ui-content')
                        .append('<h2 class="hstyle">'+item.name+' '+item.surname+'</h2>')
                        .append($('<ul />').attr('data-role', 'listview').attr('data-inset', 'true') 
                if (item.cellulare != '') {     .append('<li><a href="tel:+39'+item.cellulare+'"><img src="images/app/tel.png" class="ui-li-icon">'+item.cellulare+'</a></li>')  }
                        ) // data-role page
                        ); // data-role main                      

                        makePage.appendTo($.mobile.pageContainer);

我想要的条件是“如果变量项不为空，追加这个..”。

谢谢

Answer 1

如果您想稍后将新元素附加到变量中，请将新 div 存储到变量中。你这样做的方式是告诉编译器使用不存在的真值的 append 方法。

var newDiv = $('<div />').attr('data-role', 'page')
                         .append($('<div>')
                         .attr('data-role', 'header');

if (item != '') {
 newDiv.append('<a href="#"></a>')
        .append('<img src="images/app/logo.png" id="navImg"/>');
}

如果您需要附加到特定元素，则需要在该级别附加，然后将该级别放入父级。例如，如果您尝试将图像附加到锚点内（请注意您的代码，如果它是正确的代码，则将全部附加到您创建的第一个 div 中）：

$('<a href="#"></a>').append('<img src="images/app/logo.png" id="navImg"/>').appendTo(newDiv);

在您的第一部分中，您可能打算创建一个 div，然后附加另一个具有特定数据角色的 div，但是您这样做的方式会创建一个具有数据角色页面的 div，然后附加另一个 div ，然后将父 div 的 data-role 更新为 header。要按顺序执行，您应该这样做：

var newDiv = $('<div />').attr('data-role', 'page');
$('<div>').attr('data-role', 'header').appendTo(newDiv);