Javascript find child class

Question

I have a table. When the item is dropped I need to apply padding to a single table cell. I have flagged that cell with a class. How do I select it?

droppedRow contains the table row that is has just been dropped.

If it was an id I would do droppedRow.getElementById('..'); Is there something similar for class names. Needs to support >= IE7

Thanks

score 1 · Accepted Answer · edited May 23 '17 at 09:58

Using vanilla JavaScript, you'll probably need to load up all of the element's by tag name and then locate it by evaluating each element's classname.

For example (the styles are just for example)...

var tableCells = document.getElementsByTagName('td');
for(var i = 0, l = tableCells.length; i < l; i++) {
   if(tableCells[i].className === 'droppedRow') {
      tableCells[i].style.padding = '1em';
   }
}

If, on the other hand, you're using jQuery, then you should be able to use:

$('.droppedRow').css('padding', '1em');

Note however that in both of these examples, all cells that have the droppedRow class name will receive this styling (rather than just a single element).

If you're not using a library, I'd say stick with the vanilla variant of this functionality - libraries would be too much overhead just to condense this to a single line.

Maxym's answer also provides a solid implementation of getElementsByClassName for older browsers.

Thanks Tom, I have jQuery available to me but this library is using vanilla JS and I don't want to create a new dependency for the sake of 1 line. Code worked perfectly :D — John, Mar 10 '11 at 14:19

Felix Kling · Answer 2 · 2011-03-10T14:47:13.720

There exists getElementsByClassName but it is not supported in IE. Here is what you can do:

var element;

// for modern browsers
if(document.querySelector) {
    element = droppedRow.querySelector('.yourClass');
}
else if(document.getElementsByClassName) {  // for all others
    element = droppedRow.getElementsByClassName('yourClass')[0];
}
else { // for IE7 and below
    var tds = droppedRow.getElementsByTagName('td');
    for(var i = tds.length; i--; ) {
        if((" " + tds[i].className + " ").indexOf(" yourClass ") > -1) {
            element = tds[i];
            break;
        }
    }
}

Reference: querySelector, getElementsByClassName, getElementsByTagName

Hi, its supported in IE9. See [link](http://www.quirksmode.org/dom/w3c_core.html) — scheffield, Mar 10 '11 at 14:16

Maxym · Answer 3 · 2011-03-10T14:24:31.827

Clientside getElementsByClassName cross-browser implementation:

var getElementsByClassName = function(className, root, tagName) {
        root = root || document.body;
        if (Swell.Core.isString(root)) {
            root = this.get(root);
        }


    // for native implementations
    if (document.getElementsByClassName) {
        return root.getElementsByClassName(className);
    }

    // at least try with querySelector (IE8 standards mode)
    // about 5x quicker than below
    if (root.querySelectorAll) {
        tagName = tagName || '';
        return root.querySelectorAll(tagName + '.' + className);
    }

    // and for others... IE7-, IE8 (quirks mode), Firefox 2-, Safari 3.1-, Opera 9-
    var tagName = tagName || '*', _tags = root.getElementsByTagName(tagName), _nodeList = [];
    for (var i = 0, _tag; _tag = _tags[i++];) {
        if (hasClass(_tag, className)) {
            _nodeList.push(_tag);
        }
    }
    return _nodeList;
}

Some browsers support it natively (like FireFox), for other you need provide your own implementation to use; that function could help you; its performance should be good enough cause it relies on native functions, and only if there is no native implementation it will take all tags, iterate and select needed...

UPDATE: script relies on hasClass function, which can be implemented this way:

function hasClass(_tag,_clsName) {
    return _tag.className.match(new RegExp('(\\s|^)'+ _clsName +'(\\s|$)'));
}

score -1 · Answer 4 · answered Mar 10 '11 at 14:09

-1

It sounds like your project is in need of some JQuery goodness or some Dojo if you need a more robust and full-fledged javascript framework. JQuery will easily allow you to run the scenario you have described using its selector engine.

answered Mar 10 '11 at 14:09

Simon H

1,735
12
14

not sure why i got a down-vote here. I am pretty sick of people trying to reinvent the wheel when they are trying to do the simplest things. JavaScript frameworks were made for a reason. – Simon H Mar 10 '11 at 14:13
Well you could say that jQuery reinvented the wheel, because it was possible before to select elements. jQuery is not the answer to everything. And why to include a library to select one element in a certain situation? – Felix Kling Mar 10 '11 at 14:21
because if you are going to be needing to select on element then I am sure you will need to do other such selections down the track. I am not saying JQuery is the answer to everything. It is just much easier to go with robust and quick way of doing these things now then spending much too much time on doing mundane tasks like this manually. – Simon H Mar 10 '11 at 14:23
All I am saying is it is better to make a switch to a well supported framework now rather then trying to attempt to smooth out every browser inconsistency yourself and wasting time. – Simon H Mar 10 '11 at 14:25

score -1 · Answer 5 · answered Mar 10 '11 at 14:10

-1

If you are using a library, why not use:

JQuery - $("#droppedRow > .paddedCell")

Thats the dropped row by ID and the cell by class

Prototype - $$("#droppedRow > .paddedCell")

answered Mar 10 '11 at 14:10

josh.trow

4,861
20
31

1

Because the OP didn't say anything about using a JS library. – Matt Ball Mar 10 '11 at 14:13
1

And yet he didn't say he didn't want one did he? If he had said that then I would understand the downvote. – josh.trow Mar 10 '11 at 14:14

Javascript find child class

5 Answers5