将值列表添加到值本身，不包括其自身的值

Adding a list of values to the value itself excluding its own value

本文关键字：不包括 列表 添加      更新时间：2023-09-26

我在父div中有一个文本框列表，比如'parentDom'。我需要将一个数据属性"list"附加到这些文本框中的每一个，该文本框具有parentDom下所有文本框的值列表，除了它自己。

到目前为止，我有这个

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

我使用下划线.js。这是正确的方法吗？

一种方法（假设我正确解释问题）是：

// 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() .
  • j查询：
    • attr() .
    • get() .
    • map() .
相关文章：