Javascript find child class

Question

我有一张桌子。当项目被删除时，我需要将填充应用于单个表格单元格。我已经用班级标记了这个单元格。我如何选择它？

droppedRow包含刚删除的表格行。

如果这是一个ID我会做droppedRow.getElementById('..');类名是否有类似的东西。需要支持> = IE7

感谢

Answer 1

使用香草JavaScript中，你可能需要通过标签名来加载了所有的元素，然后通过评估每个元素的类名找到它。

例如（样式只是举例）...

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

如果，另一方面，你使用jQuery，那么你应该能够使用：

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

但是请注意，在这两个示例中，具有droppedRow类名称的全部单元都将接收此样式（而不仅仅是单个元素）。

如果你不使用库，我会坚持使用这个功能的香草变体 - 图书馆将过多的开销，只是为了将其压缩到一条线。

Maxym的answer还为旧版浏览器提供了getElementsByClassName的可靠实现。

Answer 2

这听起来像你的项目需要一些JQuery的善良或一些Dojo，如果你需要一个更强大和完整的JavaScript框架。 JQuery很容易让你运行你使用其选择器引擎描述的场景。

Answer 3

如果您使用的是图书馆，为什么不使用：

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

那由ID的下降排和类细胞

原型 - $$("#droppedRow > .paddedCell")

Answer 4

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

某些浏览器本身支持它（如FireFox），对于其他您需要提供您自己的实现来使用;该功能可以帮助你;它的性能应该足够好，因为它依赖于本地函数，并且只有在没有本地实现时，它将采用所有标记，迭代和选择所需...

更新：脚本依赖于hasClass函数，可以实现这样：

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

Answer 5

存在getElementsByClassNamebut it is not supported in IE。这里是你可以做什么：

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

参考：querySelector，getElementsByClassName，getElementsByTagName