自定义属性问题

时间:2012-05-16 15:31:14

标签: javascript html getelementbyid

我正在尝试同时获取多个元素ID的“数量”属性。

这是我试过的:

productMinimum : document.getElementsById("id1","id2").getAttribute("quantity")

我该如何使这项工作? “id1”和“id2”元素都具有“数量”属性。

以下是HTML方面的内容:

<li class="product" name="RD-101" id="id1" price="18" quantity="2">
<li class="product" name="RD-101" id="id2" price="18" quantity="4"> 

7 个答案:

答案 0 :(得分:3)

您遇到的问题是getElementsById()不存在(除非您已在其他地方定义)。你应该使用的是getElementById(),尽管两次(如getElementById(),顾名思义,只返回一个元素,即使有具有相同id的多个元素,这是无效的标记,所以请不要这样做),然后将返回的元素推送到数组中:

var products = [];
products.push(document.getElementById("id1"));
products.push(document.getElementById("id2"));

当然,你可以创建自己的函数来根据id返回多个元素:

function getElementsById(ids) {
    if (!ids) {
        return false;
    }
    else {
        var elems = [];
        for (var i = 0, len = ids.length; i < len; i++) {
            if (document.getElementById(ids[i])) {
                elems.push(document.getElementById(ids[i]));
            }
        }
        return elems;
    }
}

console.log(getElementsById(['id1','id3']));​

JS Fiddle demo

请记住,这会返回一个常规数组, 一个nodeList(例如,将返回{{1} }})。返回的数组,即使它只是一个元素,也必须以与任何其他数组相同的方式进行迭代。

参考文献:

答案 1 :(得分:1)

function getQuantity(id) {
 return document.getElementById(id).getAttribute("quantity");
}

var quantId1 = getQuantity('id1');
var quantId2 = getQuantity('id2');

getElement * s * ById返回一个数组。你需要得到个别物品。如果你有很多元素可以按类产品选择并编写一个简单的函数来循环它们并创建一个数组。

答案 2 :(得分:0)

您一次只能获得一个元素(使用getElementById())。如果您想要一个包含数量的数组,请使用:

[document.getElementById('id1').getAttribute('quantity'), document.getElementById('id2').getAttribute('quantity')]

考虑使用jQuery,你可以使用$('#id1, #id2'),而且它支持轻松访问data-属性 - 你现在正在做的是无效的HTML,因为li没有{ {1}}或price属性:

quantity

获取数量数组:

<li class="product" name="RD-101" id="id1" data-price="18" data-quantity="2">
<li class="product" name="RD-101" id="id2" data-price="18" data-quantity="4"> 

答案 3 :(得分:0)

没有getElementsById这样的功能。您可以使用getElementsByClassNamegetElementsByName

https://developer.mozilla.org/en/DOM/document.getElementsByName https://developer.mozilla.org/en/DOM/document.getElementsByClassName

请注意getElementsByClassName相当新,不受旧浏览器的支持。

答案 4 :(得分:0)

使用纯JavaScript,您需要为此编写自己的函数:

function getQuantities() {
    var args = Array.prototype.slice.call(arguments);
    var quantityValue = 0;
    for(var i = 0; i < args.length; i++) {
        quantityValue += document.getElementsById(args[i]).getAttribute("quantity");
    }
    return quantityValue;
}

// your code
productMinimum : getQuantities("id1","id2")

答案 5 :(得分:0)

当我understand it时,document.getElementById当时只占用一个ID

另外,请考虑使用html5自定义data attributes

答案 6 :(得分:0)

没有getElementsById()

这样的东西

但有querySelectorAll,但它是not supported in IE7 and older though

here's a sample应返回节点列表中的两个<li>

document.querySelectorAll('#id1, #id2')