The original Q isn't very specific about contents/purpose and there should be variation, depending, IMO. I definitely disagree with the current accepted answer on one point. Looping through and attaching new IDs to a ton of HTML that's already rendered could cause massive amounts of reflow calculation which could get ugly depending on what 'stuffContainer' represents.
Build With IDs First From Server or Inject as Single Block on Client-Side if You Must
As a general rule, avoid hitting the DOM with changes repeatedly if you can avoid it. IDs built beforehand on the server is pretty negligible as far as the browser loading the page, IMO. Sure, it's a larger, and consequently slower hash-table but if we're talking hundreds and not tens of thousands I seriously doubt you're going to notice.
A more efficient client-side approach in the case of something like a select list built from data would be to build as a string first, with IDs and all, and then assign to innerHTML of a container or if like some of my js chat colleagues, you have a bizarre hang-up about innerHTML in every possible use-case even though it's in the spec now, at the very least build and append to a document fragment first. and then append that to your container.
Data-Attributes or Classes Over IDs
IMO, the smell-factor isn't so much about performance but rather HTML bloat and creating an ID dependency where none is needed, thereby blocking something else that might find a custom ID on one of your single-item divs useful. IDs are definitely the ideal way to narrow down an element look-up in JavaScript but in cases of containers with contents you'll get more flexibility out of ID'd containers than ID'ing every child item. The performance gain of one-stepping vs. two-stepping isn't worth the flexibility cost of applying generic IDs to elements.
As an alternative you can use classes with unique values or the data attribute, e.g. 'data-itemId="0"'. For smaller sets of HTML like a custom select list where IDs are connected to some server-side indexing system for ease of updating data I would tend to favor this highly visible approach as it makes it easier to understand the architecture, but it adds a lot of needless attributes to track in scenarios where hundreds to thousands of items might be involved.
Or Ideally (in most cases), Event Delegation
Most ideally, IMO, you avoid additional attributes altogether in cases where you only care about the child single-item element you're clicking and not what it's 'ID' is or the order those single-item containers will remain static and you can safely assume the positions are the effective IDs. Or another scenario where this might work with a non-static single-item set is if you've got single-item data in an array of objects that gets shuffled and then used to build and replace HTML on user-initiated sorts that will always tie order of the HTML to other data-tracking dependencies.
The non-Jquery approach (untested):
var myContainer = document.getElementById('stuffContainer');
//ignore following indent goof
myContainer.addEventListener('click', function(e){
var
singleItem,
elementOriginallyClicked = singleItem = e.target,
stuffContainer = this;
//anything clicked inside myContainer will trigger a click event on myContainer
//the original element clicked is e.target
//google 'event bubbling javascript' or 'event delegation javascript' for more info
//climb parentNodes until we get to a single-item node
//unless it's already single-item that was originally clicked
while( !singleItem.className.match(/[=\s'"]single-item[\s'"]/g) ){
singleItem = singleItem.parentNode;
}
//You now have a reference to the element you care about
//If you want the index:
//Get the singleItem's parent's childNodes collection and convert to array
//then use indexOf (MDN has normalizer for IE<=8) to get the index of the single-item
var childArray = Array.prototype.slice.apply(stuffContainer.childNodes,[0]),
thisIndex = childArray.indexOf(singleItem);
doSomethingWithIndex(thisIndex);
//or
//doSomethingWithDOMObject(singleItem);
} );
Or simple JQuery delegation style (also, untested):
$('#someContainer').on('click','.single-item', function(){
var $_singleItem = $(this), //jq handles the bubble to the interesting node for you
thisIndex = $_singleItem.index(); //also getting index relative to parent
doSomethingWithIndex(thisIndex);
//or
//doSomethingWithJQObject($_thisItem);
} );
