Question

我在父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);
});

使用underscore.js。这是正确的方法吗？

Answer 1

这样做的一种方式（假设我正确地解释了问题）是：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

然而，一个稍微简单的方法是：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

参考文献：

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

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

1 个答案: