获取包含字符串的id

Question

我试图得到所有包含给定字符串的id。不知道完整的id，只知道部分id。Id看起来是这样的：

<td class="item" id=shipping-1 align="left">$1.00</td>
<td class="item" id=shipping-2 align="left">$6.49</td>
<td class="item" id=shipping-3 align="left">$8.50</td>
// etc...

正如您所看到的，“送货-”是一个常量，但附加的编号在页面加载时是动态的(取决于哪些发送选项对接收地址有效)。

我对javascript不是很好，但显然在这里使用getElementById()是行不通的。

我想避免做一些笨拙的事情，比如在得到一个“未定义的”之前，让id处于循环状态。

我需要这样的东西：getElementsContainingString('shipping-')

我需要得到这些id的数组，然后读取innerHTML并确定哪个最便宜。这必须通过javascript动态地完成，因为我们不能控制服务器端的页面来执行这个逻辑。

Answer 1

document.querySelectorAll('[id^="shipping-"]');

不需要jQuery。这为id="shipping-[wildcard]"做了一个CSS选择器。MDN:查询选择器，MDN:属性选择器.这适用于IE 8+，如果您希望支持更低的，可以使用多填充。

Answer 2

如果使用JQuery，可以使用以下代码：

var cells = $("td[id^=item]");

括号[]告诉您接受所有以字符串"item“开头的id属性的td。

Answer 3

试着看看这个答案：基于部分字符串的Javascript getElementById

然后，您会想要使用他们的副手的例子：http://jsfiddle.net/xwqKh/1/

他们使用了以下代码(不是我自己的)：

document.findElementsWithIdLike = function(prefix) {
    var results = [];
    findChildrenWithIdLike(document.body, prefix, results);

    return results;
};

window.findChildrenWithIdLike = function(node, prefix, results) {
    if (node && node.id && node.id.indexOf(prefix) == 0) {
        //match found
        results.push(node);
    }

    //check child nodes
    for (var i = 0; i < node.childNodes.length; i++) {
        var child = node.childNodes[i];
        var childResult = findChildrenWithIdLike(child, prefix, results);
        if (childResult) {
            results.push(childResult);
        }
    }
};