0

メソッドチェーンを使用して一連の要素を追加する、いくつかの古典的な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))
                )

そのような条件が真である場合にのみ、中央に要素を追加したいと思います。これを3つの異なるメソッドチェーンに分割し、中央にロジックを追加して、そのような要素を追加する必要があるかどうかを確認できます。

しかし、もっとエレガントな解決策はあるのだろうかと思いました。

ありがとう

4

2 に答える 2

1

条件演算子を使用して、条件が満たされない場合にオプションで渡すことができnullます.append()。jQueryは気にしません。

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

使用しているものよりも要素を作成するためのよりコンパクトな構文があることに注意してください。

jQuery('<span>', { 'class': 'foo', text: 'bar', css: 'baz' });
于 2013-03-08T16:37:18.793 に答える
0

追加する要素を表すオブジェクトの配列を作成します。例えば

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);
});
于 2013-03-08T16:39:31.710 に答える