Javascript: элементы из двух идентификаторов Div - PullRequest
Новая
       12

Javascript: элементы из двух идентификаторов Div

0 голосов
/ 13 сентября 2011

Мне нужно выбрать все элементы привязки на двух разных панелях навигации.Какой лучший способ сделать это?Эффективный и / или эффективный.

Вариант 1: я могу установить каждую навигацию в класс, найти класс, захватить все якоря в каждом div с этим классом.

Вариант 2: я могу установить каждую навигацию с идентификатором.По какой-то причине у меня возникли проблемы с объединением двух массивов якорей из каждого div-идентификатора.Есть идеи, почему они являются массивами?Ex.

<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: Получить каждый div по ID.Отправить в функцию, чтобы перебрать, получить привязки и выполнить соответствующие действия.

Что было бы быстрее или потребляло бы меньше ресурсов, и / или что, по вашему мнению, было бы более легко обслуживаемым?

Я знаю, что есть отличный метод с jQuery, но, учитывая, что мой фрагмент довольно короткий,Я бы предпочел не добавлять всю библиотеку только для нескольких небольших функций.

Спасибо за помощь!

Ответы [ 3 ]

1 голос
/ 13 сентября 2011

Вы близки: 

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

Не используйте Array.prototype.slice.call(), потому что вы не должны обращаться с хост-объектами как с объектами собственного ECMAScript, например, это не сработает в IE <9. Нет спецификации где-либоскажем, что хост-объекты должны вести себя как нативные объекты ECMA-262 (а ECMA-262 прямо говорит, что они не обязаны). </p>

Обратите внимание, что существует также коллекция document.anchors и document.links коллекция (которые не являются взаимоисключающими, элемент A может быть якорем, ссылкой или обоими). ​​

0 голосов
/ 13 сентября 2011 
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 не возвращает массив, он возвращает NodeList, у которого нет метода concat. Материал slice.call превращает NodeList в настоящий массив. В качестве альтернативы, это более эффективно сделать 

nav.push.apply(nav, subnav);
// nav is now the equivalent of allnav
0 голосов
/ 13 сентября 2011

getElementsByTagName возвращает NodeList. A NodeList не является Array.

NodeList однако похож на массив и может быть преобразован в массив с помощью 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);

В качестве альтернативы вы можете использовать Array.prototype.slice.call(nav) для преобразования NodeList в Array.

Вы также можете добавить класс anchor-nav к обоим навигационным элементам и затем использовать querySelectorAll.

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

...