2013-03-08 56 views
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)) 
       ) 

我只想在這樣和那樣的條件爲真時纔在中間附加一個元素。我可以將它分解爲三種不同的方法鏈,並將邏輯添加到中間,以查看是否應附加這樣和那樣的元素。

但是,我想知道有沒有更優雅的解決方案?

感謝

+0

觸發是否插入元素以及插入哪種元素的條件是什麼?有各種各樣的方式可以解釋。請發佈所有相關代碼。 – jxpx777 2013-03-08 16:37:07

+0

順便說一句,你可能想開始考慮使用客戶端模板。 – 2013-03-08 17:12:32

回答

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