Javascript : Two Div ID의 요소

두 개의 다른 탐색 패널에서 모든 앵커 요소를 선택해야합니다. 그렇게하는 가장 좋은 방법은 무엇입니까? 효과적인 &/또는 효율적입니다.Javascript : Two Div ID의 요소

옵션 1 : 각 탐색을 클래스로 설정하고, 클래스를 찾고 해당 클래스로 각 div 내의 모든 앵커를 가져올 수 있습니다.

옵션 2 : 각 nav에 ID를 설정할 수 있습니다. 웬일인지 각 div id에서 앵커 두 배열을 연결하는 데 문제가있었습니다. 어떤 아이디어가 왜 배열입니까? 전의.

<code> 
var nav = document.getElementById("nav").getElementsByTagName("a"); 
var subnav = document.getElementById("subnav").getElementsByTagName("a"); 

var allnav = nav.concat(subnav); // Didn't seem to work 

// neither did this. Just seemed to break.  
for(var i=0;i<subnav.length;i++){ 
    nav.push(subnav[i]); 
} 
</code>

옵션 3 : ID별로 각 div를 가져옵니다. 루프 스루, 앵커 얻기, 적절한 조치 수행을 위해 함수로 보냅니다.

어느 것이 더 빠르고 더 적은 자원을 사용합니까? &/또는 어느 것이 더 유지 보수가 가능하다고 생각합니까?

jQuery와 함께 훌륭한 방법이 있다는 것을 알고 있지만 스 니펫이 매우 짧기 때문에 몇 가지 작은 기능에 전체 라이브러리를 추가하지 않는 것이 좋습니다.

도움 주셔서 감사합니다.

출처

2011-09-12 David Hobs

getElementsByTagName은 NodeList을 반환합니다. NodeList은 Array이 아닙니다.

NodeList 그러나 같은 배열하고 또는 당신이 Array에 NodeList 변환 Array.prototype.slice.call(nav)을 사용할 수 있습니다 toArray

var toArray = function _toArray(obj) { 
    var arr = []; 
    for (var i = 0, ii = obj.length; i < ii; i++) { 
      arr.push(obj[i]); 
    } 
    return arr; 
}; 

var allnav = toArray(nav).concat(subnav);

를 사용하여 배열로 변환 할 수 있습니다.

anchor-nav 클래스를 두 nav에 모두 추가 한 다음 querySelectorAll을 사용할 수도 있습니다.

출처

2011-09-13 00:06:12 Raynos

호스트 객체를 기본 객체와 같이 처리하지 말고 * for..in *을 사용하지 마십시오. NodeLists는 Array에 복사하기에 적합하지 않은 이름 지정된 속성을가집니다 (예 : * item * 메소드). for 루프와 카운터를 사용하여 반복합니다. – RobG

그것은 내가 NodeList를 Array로 변환하는 것을 본 적이있는 가장 이상한 방법입니다. 실제로, 나는 var arr = [];을'var arr = Array (obj.length); '로 변경 했더라도 동작하지 않을 것이라고 확신합니다 ... –

@ alpha123 왜 그렇게 동작할까요? ? – Raynos

var slice = document.body instanceof Object ? // IE < 9 has some really weird issues 
    Array.prototype.slice : function() { 
     for (var array = [], i = 0, l = this.length; i < l; ++i) 
      array[i] = this[i]; 
    }; 

var nav = slice.call(document.getElementById("nav").getElementsByTagName("a")); 
var subnav = slice.call(document.getElementById("subnav").getElementsByTagName("a")); 

var allnav = nav.concat(subnav); // Will work now.

getElementsByTagName

var anchors = document.querySelectorAll("nav.anchor-nav a");

IT는 concat 방법이없는 NodeList를를 반환, 배열을 반환하지 않습니다. slice.call은 NodeList를 실제 배열로 변환합니다. 또는, 당신은 가까운

nav.push.apply(nav, subnav); 
// nav is now the equivalent of allnav

출처

2011-09-13 00:06:15

'nav.push.apply (nav, subnav)' – Raynos

위의 코드는 IE < 9. – RobG

안녕하세요, 저는 운전 면허 시험을 통과했습니다 !! 후우 !! 이제 저는 정말로 아르 세 하츠의 스택 오버 플로우 홀에 갇혔습니다. 예! 누구든지 자신이 누구인지 밝힐 용기가 없었습니다. 그래서 나는 칭찬을하지 않는 것에 대해 사과합니다. – RobG

을하는 것이 더 효율적입니다 :

var allnav = []; // initialise allnav as an array 

// Store length of NodeList, slight performance boost in some browsers 
// and is just neater 
for (var i=0, iLen=subnav.length; i<iLen; i++) { 
    allnav.push(subnav[i]); 

    // or 

    allnav[i] = subnav[i]; 
}

당신은 예를 들어, 기본 ECMAScript를 객체와 같은 호스트 오브젝트를 취급하지해야하기 때문에 Array.prototype.slice.call()를 사용하지 마십시오 IE <에서 실패 할 것입니다. 9. 호스트 객체가 네이티브 ECMA-262 객체처럼 동작해야한다고 명시하는 곳이 없습니다 (ECMA-262는 명시 적으로 필요하지 않다고 말함).

document.anchors 컬렉션 및 document.links 컬렉션 (상호 배타적이지 않은 A 요소는 앵커, 링크 또는 둘 다가 될 수 있음)에 유의하십시오.

출처

2011-09-13 00:26:23 RobG

Javascript : Two Div ID의 요소

답변

관련 문제