Question

我有一些经典的JQuery / JavaScript代码，我使用方法链接附加了一堆元素。

jQuery('<div>').addClass('HEADER').append(
                    jQuery('<span>').addClass('TARGET ').html('&nbsp;').css('width', '25px')
                ).append(
                    jQuery('<span>').addClass('NAME HEADER').text(localization.opportunity).css('width', defaultNameSize-paddingTotal)
                ).append(
                    jQuery('<span>').addClass('HEIGHT HEADER').text(localization.amount)
                ).append(
                    jQuery('<span>').addClass('ANSWER HEADER').css('display', 'none').text(localization.solution)
                ).append(
                    jQuery('<span>').addClass('VALUETYPE HEADER').text(localization.type)
                ).append(
                    jQuery('<span>').addClass('VALUETOLEFT HEADER').css('display', 'none').text(abbreviate(CAT_VALUETOUS))
                ).append(
                    jQuery('<span>').addClass('VALUETORIGHT HEADER').css('display', 'none').text(abbreviate(CAT_VALUETOTHEM))
                )

我只想在这样的条件为真的情况下在中间追加一个元素。我可以把它分成三个不同的方法链，并在中间添加逻辑，看看是否应该附加这样的元素。

但是，我想知道有更优雅的解决方案吗？

由于

Answer 1

如果条件不满意，您可以使用条件运算符有选择地将null传递给.append()。 jQuery不介意。

// snip
.append(...)
.append(someBoolean ? jQuery(...) : null)
.append(...)
// snip

注意there is a more compact syntax for creating elements而不是您正在使用的内容：

jQuery('<span>', { 'class': 'foo', text: 'bar', css: 'baz' });

Answer 2

创建一个对象数组，表示要追加的元素。例如

var elements = [{ element: '<span>',
                  class: 'TARGET',
                  html: 'stuff',
                  text: 'node text'
               }];

$(elements).each(function(i, element) {
    // your logic here
    $('<div>')
       .append(element.element)
       .addClass(element.class)
       .html(element.html)
       .text(element.text);
});

请求登录附加链？

2 个答案: