CODEWITHSUNDEEP
javascripthtmldomextjsselector
balkon_smoke
balkon_smoke

Reputation: 1206

The easiest way to fetch nodes from DOM with specified attributes values

This is not a problem, I just ask for the easiest way to implement this.

What I have.

In HTML: list of checkboxes.

<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />

In JavaScript — array of several values: var aValues = [1, 3]; And I need fetch all checkboxes from DOM with values specified in aValues.

How did I do this:

var aoNodes = document.querySelectorAll('input[value="1"], input[value="3"]');

But maybe anybody know easier (shorter) way to build the query, something like: input[value="1"|"3"] or input[value="1", "3"].

Both examples above are incorrect, but I gave them just to be more clear with you.

UPDATE

More things to clarify my question:

Upvotes: 0

Views: 572

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 186043

How about...

var checkboxes = form.querySelectorAll( 'input[type="checkbox"]' );

checkboxes = [].filter.call( checkboxes, function ( checkbox ) {
    return aValues.indexOf( +checkbox.value ) > -1;
});

where form is the element that contains all your check-boxes. (You don't want to unnecessarily make a document-level query.)

Note that this uses Array.filter(), which may not be available in all browsers.

Live demo: http://jsfiddle.net/zF3mu/

Upvotes: 1

Raynos
Raynos

Reputation: 169511

var boxes = [].slice.call(form.elements).filter(function ( element ) {
    return element.type === 'checkbox' && [1,3].indexOf(+element.value) > -1;
});

Use form.elements to get the inputs of a form. Then filter by type and value.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075337

Your querySelectorAll('input[value="1"], input[value="3"]') is probably the briefest, even CSS3 doesn't have an attribute selector for "any of these values". (Neither does jQuery.) You can build the big selector from aValues fairly easily using Array#join:

var selector = 'input[type="checkbox"][value="' +
               aValues.join('"], input[type="checkbox"][value="') +
               '"]');
var matches = querySelectorAll(selector);

Fairly concise though sadly repeats bits and pieces. You could use a reusable function:

function niftyJoin(array, prefix, delim, suffix) {
  return prefix + array.join(suffix + delim + prefix) + suffix;
}

Then:

var matches = querySelectorAll(niftyJoin(aValues, 'input[type="checkbox"][value="', ',', '"]'));

If you don't like the join approach, you could get all relevant input elements and then filter out the ones whose values are not in the array:

var matches, inputs, index, input;
matches = [];
inputs = querySelectorAll('input[type="checkbox"]'); // Or perhaps more targeted
for (index = 0; index < inputs.length; ++index) {
    input = inputs[index];
    if (aValues.indexOf(parseInt(input.value, 10)) !== -1) {
        matches.push(input);
    }
}

That might be slower than building the big selector for querySelectorAll since you're filtering in the JavaScript layer rather than the browser's selector engine, but unless you're doing this repeatedly in a tight loop, it's not likely to matter. Also, note that I've relied on Array#indexOf, which isn't supported by quite as many browsers as querySelectorAll (IE8 has the latter, for instance, but not the former).

Speaking of which: I'm guessing you know that not all browsers support querySelectorAll yet, although wow it's getting close, looks like nearly everything but IE6 and IE7. I assume if you're using it, you know that your target environment will have it.

For the jQuery folks: That filtering gets (much) more concise using jQuery:

var matches = $('input[type="checkbox"]').filter(function() {
    return $.inArray(parseInt(this.value, 10), aValues);
});

Nice and concise. Again, possibly a bit slower than doing it all in querySelectorAll, and again unlikely to matter.

Update: You've said you're using ExtJS on this project. According to the DomQuery docs, it doesn't offer a selector that does what you want either. It does offer filter which could be useful if you want to do the filter-after-the-fact approach, but I frankly think the join approach listed at the very top is going to be the most concise and best performing.

Upvotes: 1

Related Questions