Javascript find child class

Question

테이블이 있습니다. 항목이 삭제되면 단일 표 셀에 패딩을 적용해야합니다. 나는 그 세포에 계급 표시를했다. 어떻게 선택합니까?

droppedRow은 방금 삭제 된 테이블 행을 포함합니다.

만약 내가 ID라면 droppedRow.getElementById('..'); 클래스 이름과 비슷한 것이 있습니까? 바닐라 자바 ​​스크립트를 사용하여> = IE7

감사

Answer 1

를 지원해야합니다, 당신은 태그 이름으로 요소의 모두를로드 한 후 각 요소의 클래스 명을 평가하여 그것을 찾아야 아마 것이다. 다른 한편으로는, 당신이 jQuery를 사용하고, 경우

예를 들어

(스타일 그냥 예입니다) ...

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

, 당신은 사용할 수 있어야합니다 :

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

그러나이 두 예에서 모두 의 droppedRow 클래스 이름을 가진 셀은 단일 요소가 아닌이 스타일링을 수신합니다.

라이브러리를 사용하지 않는 경우이 기능의 바닐라 변형을 고수해야합니다. 라이브러리는 너무 많은 오버 헤드로 인해 한 줄로 압축되지 않습니다.

Maxym의 answer은 구형 브라우저에 대한 getElementsByClassName의 견고한 구현을 제공합니다.

Answer 2

더 강력하고 본격적인 자바 스크립트 프레임 워크가 필요하다면 프로젝트에 JQuery의 장점이 있거나 Dojo가 필요한 것 같습니다. 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와 같은) 그것을 지원합니다. 다른 브라우저에서는 사용할 구현을 제공해야합니다. 그 기능은 당신을 도울 수 있습니다; 그것의 성능은 네이티브 함수에 의존하기에 충분해야하고 네이티브 구현이없는 경우에만 모든 태그를 취하여 반복하고 필요에 따라 선택해야합니다.

UPDATE : 스크립트는 구현할 수있는 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