Question

假设您有几个具有不同值整数的div，例如

<div class=d alt=2>3</div>
<div class=d alt=9>5</div>
<div class=d alt=2>3</div>
<div class=d alt=7>9</div>
<div class=d alt=2>2</div>
<div class=d alt=2>7</div>
<div class=d alt=3>3</div>
<div class=d alt=2>5</div>
<div class=d alt=5>4</div>

是否可以使用javascript增加每个div的数量，而无需为每个div编写代码，而是同时处理所有div。

Answer 1

在现代浏览器中，我能想到的最简单的方法：

var textProperty = 'textContent' in document.body ? 'textContent' : 'innerText';

[].forEach.call(document.querySelectorAll('div.d'), function (a) {
    a[textProperty] = parseFloat(a[textProperty]) + parseFloat(a.getAttribute('data-num'))
});

JS Fiddle demo

为确保我们仅选择拥有 .d（以避免NaN-related problems）属性的data-num元素：

var textProperty = 'textContent' in document.body ? 'textContent' : 'innerText';

[].forEach.call(document.querySelectorAll('div.d[data-num]'), function (a) {
    a[textProperty] = parseFloat(a[textProperty]) + parseFloat(a.getAttribute('data-num'))
});

JS Fiddle demo

顺便提一下，alt属性仅对<img />元素有效，对{{1}有不元素。如果您必须使用自定义属性，请使用 - 有效 - div前缀自定义属性（将在HTML 5下验证，但HTML 4.1会毫无困难地接受它们）;这就是我们在代码而不是data-*中使用data-num的原因。

Answer 2

这样的东西？

它没有“”在class + alt属性周围工作，但这是不好的做法...... 您还应该考虑在div上使用数据属性而不是alt。

var divs = document.getElementsByClassName('d');
for(var i = 0; i < divs.length; i++) {
    var div = divs[i];
    var altValue = div.getAttribute("alt");
    var divValue = parseInt(div.innerHTML);
    div.innerHTML = divValue + parseInt(altValue);
}

div现在看起来像这样：

<div class=d alt=2>5</div>
<div class=d alt=9>14</div>
<div class=d alt=2>5</div>
<div class=d alt=7>16</div>
<div class=d alt=2>4</div>
<div class=d alt=2>9</div>
<div class=d alt=3>6</div>
<div class=d alt=2>7</div>
<div class=d alt=5>9</div>

JSFIDDLE WITH QUOTES（正确的HTML）：http://jsfiddle.net/3ByfH/1/

JSFIDDLE WITHOUT：http://jsfiddle.net/3ByfH/2/

同时处理许多div

2 个答案: