javascript - 要求登录附加链？

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

请注意，创建元素的语法比您使用的更紧凑：

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);
});