Get id's containing a string

Question

I'm attempting to get all id's that contain a given string. The full id is not known, only a partial id. Id's appear like so:

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

As you can see, "shipping-" is a constant, but the appended number is dynamic on page load (depends on what shipping options are valid for the receiving address).

I'm not great with javascript, but obviously using getElementById() won't work here.

I would like to avoid doing something clunky like getting id's in a loop until I get an 'undefined'.

I need something like: getElementsContainingString('shipping-')

I need to get an array of these id's, then will read the innerHTML and determine which is cheapest. This must be done dynamically via javascript because we cannot control the page on the server side to perform this logic.

I suggest you to use the `data` attribute instead of `id` https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes — htatche, Feb 21 '14 at 23:37
possible duplicate of [jquery or css selector? select all id's that start with](http://stackoverflow.com/questions/5002966/jquery-or-css-selector-select-all-ids-that-start-with) — markcial, Feb 21 '14 at 23:37
Are they all going to have the same `class` (like in your example)? You could get them all with `document.getElementsByClassName` and glean `id`s from there. — kalley, Feb 21 '14 at 23:38
yes, they all have the same class. only id's and the innerHTML vary. this may be worth a shot. — SnakeDoc, Feb 21 '14 at 23:38
I forgot to mention, this must work on as many browsers as possible, otherwise management won't allow it. We still get ie7 users... and the occasional ie6 user... :/ — SnakeDoc, Feb 21 '14 at 23:40

bjb568 · Accepted Answer · 2014-02-21T23:48:41.880

3

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

No jQuery required. This does a CSS selector for id="shipping-[wildcard]". MDN: Query selector, MDN: Attribute selector. This works with IE 8+, and there are polyfills if you want to support lower.

edited Feb 21 '14 at 23:48

answered Feb 21 '14 at 23:39

bjb568

11,089
11
50
71

does this work on all (or most) browsers? we still get ie7 and the occasional ie6 shopper. – SnakeDoc Feb 21 '14 at 23:41
mate that will only work with IE8+ im sure about that.. but IE6 wow what do they sell? stuff for 99 y o people! :O – Jorge Y. C. Rodriguez Feb 21 '14 at 23:43
@jycr753 lol, you'd be surprised who's shopping (or attempting to shop I should say) online these days. – SnakeDoc Feb 21 '14 at 23:44
thanks, I think this is going to be the "best fit" answer. maybe I can convince management that our small ie6 userbase can deal with the old way of displaying rates (fall-back sort of thing). – SnakeDoc Feb 21 '14 at 23:46
you can always check in orders, if they actually make some orders, places, and shipments.. that way you can save the way out.. or depending of your market.. ;) there is always a i way to push those people out! and force them to download a real browser @SnakeDoc – Jorge Y. C. Rodriguez Feb 21 '14 at 23:48
2

`` – bjb568 Feb 21 '14 at 23:49
@jycr753 you'd be shocked at how many users still show up on our pages with javascript disabled... but I digress... *sigh* – SnakeDoc Feb 21 '14 at 23:50
1

@SnakeDoc wow I just put a header with red lines to get a real browser... and just for fun... ` `and not support for bellow that... lol – Jorge Y. C. Rodriguez Feb 21 '14 at 23:54

score 0 · Answer 2 · answered Feb 21 '14 at 23:39

0

If you use JQuery, you can use the following code :

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

The brackets [] tells to take all td with the attribute id starting with string "item".

answered Feb 21 '14 at 23:39

alexbchr

603
4
14

I'm sure is not td[id^=item] but td[id^=shipping] – Tiberiu C. Feb 21 '14 at 23:55

score 0 · Answer 3 · edited May 23 '17 at 12:03

Try taking a look at this answer: Javascript getElementById base on partial string

You'll then want to use their second fiddle's example: http://jsfiddle.net/xwqKh/1/

They used the following code (not my own):

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

score 0 · Answer 4 · answered Feb 21 '14 at 23:39

0

This is pretty simple:

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

answered Feb 21 '14 at 23:39

Drewness

5,004
4
32
50

score 0 · Answer 5 · answered Feb 21 '14 at 23:56

0

You can always use a css selector [attrName^="startsWith"]

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

Seems to be available from IE7+ and the rest of the browsers.

Sample here : http://jsbin.com/kayov/1/edit

answered Feb 21 '14 at 23:56

Tiberiu C.

3,365
1
30
38

Get id's containing a string

5 Answers5