Лучший способ реализовать .lastChild, используя Prototype или jQuery

Question

В настоящее время мы используем прототип и jQuery в качестве наших js-фреймворков. Прямо сейчас jQuery установлен в $ j (), чтобы предотвратить конфликты с прототипом.

В прошлом мы использовали множество прототипов Element.down (), Element.next () и Element.previous () для обхода DOM. Однако мне нужен простой способ получить последний дочерний элемент. Я знаю, что могу перебрать массив с помощью Element.childElements (), но я хотел бы что-то встроенное, что читается чисто и может быть конвейерным.

Просто подумал, что я спрошу, прежде чем я изобрету колесо. Вот фрагмент кода, в котором есть lastChild, который нужно заменить:

_find : function(rows, address) {
        var obj = null;
        for (var i=0; i < rows.length && obj == null; i++) {
            if (rows[i].down().className == 'b')
                obj = this._find(rows[i].lastChild.down().down().childElements(), address);
            else if (rows[i].lastChild.getAttribute('tabAddress') == address)
                return rows[i].lastChild;
        }
        return obj;
    }

Answer 1

Ребята, обратите внимание, что функции селектора возвращают массивы элементов (не отдельных элементов), поэтому вы должны добавить адрес в массиве результатов по индексу: [0].

Код в прототипе

//if you only have the id of the parent
var lastChild = $$("#parent :last-child")[0]; 
//or
//if you have the actual DOM element
var lastChild = $(element).select(":last-child")[0]; 

Код в Jquery

//if you only have the id of the parent
var lastChild = $("#parent :last-child")[0]; 
//or
//if you have the actual DOM element
var lastChild = $(":last-child", element)[0]; 

код в простом ванильном javascript

var element = document.getElementById("parent");
var lastChild = element.childNodes[element.childNodes.length - 1];

Также обратите внимание, что они могут возвращать ноль, если у родительского элемента нет дочерних узлов.

• Некоторая информация о CSS: селектор последнего ребенка

Answer 2

Используя Prototype, вы можете использовать служебную функцию $$ , которая поддерживает большинство синтаксиса CSS3:

var lastChild = $$(".b:last-child")[0];

Answer 3

Попробуйте, это всегда работало для меня в jQuery

var lastChild = $("#parent :last-child");

http://docs.jquery.com/Selectors/lastChild

Answer 4

Для всех, кто еще использует Prototype, вы можете добавить пользовательские методы элемента:

Element.addMethods({ ... });

Я добавил эти два среди других:

first: function(element) {
    element = $(element);
    return element.childElements()[0];      
},
last: function(element) {
    element = $(element);
    var i = element.childElements().size() - 1;
    return element.childElements()[i];
}

var first = $('foo').first();
var last = $('foo').last();

Метод Element.first() является избыточным, я использую его для более чистого кода при создании цепочки.

Убедитесь, что вы reutrn element включили связывание.

Answer 5

Если кто-то найдет это во время поиска в Интернете, чтобы ответить на свой вопрос, с Prototype вы можете сделать:

Element.childElements().last();