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

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

我对javascript不太满意，但显然使用getElementById()在这里不起作用。

我想避免做一些笨拙的事情，比如在循环中获取id，直到我得到'undefined'。

我需要这样的内容：getElementsContainingString('shipping-')

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

Answer 1

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

No jQuery required。这为id="shipping-[wildcard]"做了一个CSS选择器。 MDN: Query selector，MDN: Attribute selector。这适用于IE 8+，如果你想支持更低版本，可以使用polyfill。

Answer 2

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

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

括号[]告诉所有td带有 id 属性，以字符串“item”开头。

Answer 3

试着看看这个答案：Javascript getElementById base on partial string

然后，您将想要使用他们的第二个小提琴示例：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);
        }
    }
};

Answer 4

这很简单：

var tds = document.getElementsByTagName("td");
for (var i=0; i<tds.length; i++) {
  if (tds[i].id.indexOf("shipping") == 0)
    // Do stuff...
}

Answer 5

您始终可以使用css选择器[attrName^="startsWith"]

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

似乎可以从IE7+和其他浏览器获得。

此处示例：http://jsbin.com/kayov/1/edit

获取包含字符串的id

5 个答案: