attr-chooser
Advanced tools
select among a list of dom elements with the same attribute
First write some html with a chooser attribute (or whatever you want) on the
items you want to select:
<html>
<head>
<style>
.item {
cursor: pointer;
width: 200px;
padding: 2px;
}
.item:hover {
background-color: rgb(200,200,230);
}
.item.active {
background-color: rgb(150,150,250);
color: white;
}
</style>
</head>
<body>
<div id="items">
<div class="item" x-chooser="item">one</div>
<div class="item" x-chooser="item">two</div>
<div class="item" x-chooser="item">three</div>
<div class="item" x-chooser="item">four</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
Then wire up some browser code:
var choose = require('attr-chooser')('active', function (elem) {
console.log('selected', elem.textContent);
});
var elems = document.querySelectorAll('*[x-chooser]');
for (var i = 0; i < elems.length; i++) {
choose(elems[i]);
}
or you can use attractor:
var scope = {
item: function (elem) {
console.log('selected', elem.textContent);
}
};
var attr = require('attractor')({
'x-chooser': [ require('attr-chooser'), 'active' ]
}, scope);
attr.scan(document);
Compile your browser code with browserify:
$ browserify browser.js > bundle.js
var chooser = require('attr-chooser')
Return a function choosef(elem, attrName) that you should call on every
element you want to wire up for item selection.
When somebody clicks on an element,
cb(elem, ev, name) fires with the dom element elem, the click event ev,
and the group name set in the attribute value.
Create a group based on the group string for the dom element elem.
With npm do:
npm install attr-chooser
MIT
FAQs
select among a list of dom elements with the same attribute
The npm package attr-chooser receives a total of 4 weekly downloads. As such, attr-chooser popularity was classified as not popular.
We found that attr-chooser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A malicious Chrome extension posing as an Ethereum wallet steals seed phrases by encoding them into Sui transactions, enabling full wallet takeover.
Security News
Socket is heading to London! Stop by our booth or schedule a meeting to see what we've been working on.
Security News
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.