向值本身添加一個值列表，排除它自己的值

Question

我有一個父級div內的文本框列表，比如'parentDom'。我需要將數據屬性「列表」附加到每個文本框，其中包含parentDom下所有文本框的值列表，除了它本身。

到目前爲止，我已經使用這個underscore.js

$('input').each(function(index, item) { 
    var list = _.pluck(
        _.reject(
         $('input'), 
          function(obj) { 
           return $(obj).data('id') == $(item).attr('id') 
          } 
         ), 
        'name'); 

    $(item).data('list', list); 
}); 

上午。這是正確的方式嗎？

Answer 1

這樣的（假設我正確地解釋這個問題）的一種方法是：

// getting a reference to the relevant <input /> elements: 
 
var inputs = $('#parentDom input'); 
 

 
// iterating over each of those <input /> elements, with attr(): 
 
inputs.attr('data-value', function() { 
 
    // creating a reference to the current <input /> over which we're iterating: 
 
    var cur = this; 
 

 
    return inputs.filter(function() { 
 
    // filtering the jQuery collection to remove the current <input /> 
 
    return this !== cur; 
 
    }).map(function() { 
 
    // converting the (string) value to a number, using the 
 
    // unary plus operator: 
 
    return +this.value; 
 
    // creating an array of the values 
 
    }).get().reduce(function(a, b) { 
 
    // reducing the array of values to a single value, 
 
    // by summing the previous and current values together: 
 
    return a + b; 
 
    }); 
 
}); 
 

 
// inserting a <span> after the <input /> elements, 
 
// just to show the result: 
 
inputs.after(function() { 
 
    return '<span>' + this.dataset.value + '</span>'; 
 
});

input { 
 
    display: inline-block; 
 
    float: left; 
 
    clear: left; 
 
    margin: 0 0 0.4em 0; 
 
} 
 
span { 
 
    float: left; 
 
    margin-left: 0.5em; 
 
} 
 
span::before { 
 
    content: '(data-value: '; 
 
} 
 
span::after { 
 
    content: ').'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="parentDom"> 
 
    <input type="text" value="1" /> 
 
    <input type="text" value="2" /> 
 
    <input type="text" value="3" /> 
 
    <input type="text" value="4" /> 
 
    <input type="text" value="5" /> 
 
    <input type="text" value="6" /> 
 
    <input type="text" value="7" /> 
 
</div>

一個有些簡單的方法，但是，這是：

// getting a reference to the relevant <input /> elements: 
 
var inputs = $('#parentDom input'), 
 
    // finding the total of *all* the <input /> elements: 
 
    totalValue = inputs.map(function() { 
 
    return +this.value; 
 
    }).get().reduce(function(a, b) { 
 
    return a + b; 
 
    }); 
 

 
// iterating over the <input /> elements with attr(): 
 
inputs.attr('data-value', function() { 
 
    // setting the data-value attribute to the total value 
 
    // of all the <input /> elements minus the value of the 
 
    // current <input />: 
 
    return totalValue - (+this.value); 
 
}); 
 

 
// inserting a <span> after the <input /> elements, 
 
// just to show the result: 
 
inputs.after(function() { 
 
    return '<span>' + this.dataset.value + '</span>'; 
 
});

input { 
 
    display: inline-block; 
 
    float: left; 
 
    clear: left; 
 
    margin: 0 0 0.4em 0; 
 
} 
 
span { 
 
    float: left; 
 
    margin-left: 0.5em; 
 
} 
 
span::before { 
 
    content: '(data-value: '; 
 
} 
 
span::after { 
 
    content: ').'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="parentDom"> 
 
    <input type="text" value="1" /> 
 
    <input type="text" value="2" /> 
 
    <input type="text" value="3" /> 
 
    <input type="text" value="4" /> 
 
    <input type="text" value="5" /> 
 
    <input type="text" value="6" /> 
 
    <input type="text" value="7" /> 
 
</div>

參考文獻：

• 的JavaScript：
  • Array.prototype.reduce()。
• 的jQuery：
  • attr()。
  • get()。
  • map()。