如何在jQuery的append函数中添加if条件判断

Question

我是一个有用的助手，可以为您翻译文本。

我被困在一个jQuery函数中，我想使用jQuery的append函数添加一些div，但问题是我想在这个函数中加入一些if条件。

这里是我的工作代码，没有条件：

$( "#some-div-container" ).append( 
                                  "<div>name 1" +
                                      "<a href=\"#\">" +
                                           "<div id=\"add\">Add</div>" +
                                      "</a>" +
                                      "<div>Available</div>" +
                                  "</div>"
                                );

我正在使用jQuery的ajax函数，获取一些JSON响应。我想要的是，如果响应为1，则执行其中的代码。我正在尝试使用条件语句。

 $( "#some-div-container" ).append( 
                                  "<div>name 1"
                                  if(response == 1) {    
                                     +"<a href=\"#\">" +
                                           "<div id=\"add\">Add</div>" +
                                      "</a>"
                                  }
                                      + "<div>Available</div>" +
                                  "</div>"
                                );

这是可能的吗？任何帮助将不胜感激。当我添加此条件时，发生了一个错误：“我的一些其他JavaScript函数未定义”，但是没有条件时运行得很完美。

- Irfan Ahmed

Answer 1

事先使用变量构建您的字符串：

var elements = "<div>";
if (someCondition) {
  elements += "<a href='#'>some link</a>";
}
elements += "</div>";

或者，一个更具体的例子：

var elements = "<div>name 1";
if(response == 1) {    
  elements += 
    "<a href='#'>" +
      "<div id='add'>Add</div>" +
    "</a>";
}
elements += "<div>Available</div>";
elements += "</div>";

然后将生成的字符串附加上去：

$("#some-div-container").append(elements);

- Grant Thomas

---

一个好的方法总是有帮助的=) - Irfan Ahmed

Answer 2

您可以通过以下方式实现这一点：

$('#some-div-container').append(
    '<div>name 1' + 
    (response == 1 ? '<a href="#"><div id="add">Add</div></a>' : '') +
    '<div>Available</div></div>'
);

演示

但我认为做成这样会更好看

var div = $('<div/>', { text: 'name 1' });
if(response == 1) {
    div.append($('<a/>', { href: '#' }).append($('<div/>', { id: 'add', text: 'Add' })));
}
$('<div/>', { text: 'Available' }).appendTo(div);
div.appendTo('#some-div-container');

演示

- David Hedlund

Answer 3

Try this :

$( "#some-div-container" ).append( 
    "<div>name 1"
    + (
        response == 1 ?    
        "<a href=\"#\">" +
        "<div id=\"add\">Add</div>" +
        "</a>"
        :
        ""
    )
    + "<div>Available</div>" +
        "</div>"
);

- Brewal

---

如果条件为假，您仍将附加div开标签，这可能会破坏您的代码。 - Chris Panayotoff

Answer 4

var html;
html += "<div>name 1";
if(response == 1) {    
  html += "<a href=\"#\">";
// other code.....
}                                

 $( "#some-div-container" ).append( html );

- grigno

Answer 5

根据response的值创建不同的字符串，并使用条件化的字符串进行单个append()调用。

- Derek

---

我曾考虑过那个解决方案，但这将是一个冗长的过程，我必须加入多个条件。 - Irfan Ahmed

它仍然可能比尝试在单个字符串内有一堆if语句更清晰。 - Derek