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