Stay_Strong, смотри uncompressed версию jquery, там сделано примерно так:
function nextAll(elem) {
var matched = [];
while (elem = elem.nextSibling) {
if (elem.nodeType === 1) {
matched.push(elem);
}
}
return matched;
}
PS: у меня вот что получилось) |
А ты посмотри, как в JQuery это реализовано :)
|
nextAll на js
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test{
background-color: #008000;
}
.red{
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item test">test</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<script>
function nextAll(elem) {
var next = false;
return [].filter.call(elem.parentNode.children, function(child) {
if (child === elem) next = true;
return next && child !== elem
})
};
var div = document.querySelector(".test"), next = nextAll(div);
next.forEach(function(el) {
el.classList.add('red');
});
</script>
</body>
</html>
|
рони,
Спасибо, не подскажите, как мне на чистом js вот такое изобразить
$.fn.mobileMenu = function (options) {};
На jquery это просто. Делаю по своему же примеру https://github.com/WebTravel/multile.../mobileMenu.js Там создаю объект default, потом расширяю еще option при помощи extand. А потом нужно бы возвращать первый элемент и делать это плагином.. А как я не в упор. Пока вот такое у меня:
var defaults = {
//....
}
function LoadElements(element, options) {
var extend = function(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i])
continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key))
out[key] = arguments[i][key];
}
}
return out;
};
this.options = extend({}, defaults, options);
this.element = element;
this.init();
}
Дальше будет
LoadElements.prototype.init = function () {
// тело плагина
}
И дальше как раз нужно вызов осуществлять, как в $.fn Вопрос: а как? |
|
Цитата:
|
рони,
Не подскажите, почему у меня this не берется, а документ передается в функцию prototype?
window.onload = function() {
var defaults = {
'childrenElements' : '.filter__option',//дочерние элементы, больше числа которых появляется кнопка раскрытия
'count' : '3',//число, после которого появится раскрытие
'speed' : '250',//скорость раскрытия блока по нажатию на кнопку показа
'textMore' : '+ Показать все',//Текст для кнопки "Показать все"
'textLess' : '- Скрыть'//Текст для кнопки "Cкрыть"
}
function LoadElements(element, options) {
var extend = function(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i])
continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key))
out[key] = arguments[i][key];
}
}
return out;
};
this.options = extend({}, defaults, options);
this.element = element;
this.init();
}
LoadElements.prototype.init = function() {
var self = this;
//Переменные, используемые в плагине
var elList = document.querySelectorAll(self); //находим все элементы на странице, к которым нужно применить метод
Array.prototype.forEach.call(elList, function(el, i) { //Обходим в цикле все элементы
var countChildren = elList[i].querySelectorAll(self.options.childrenElements);
if(countChildren.length > self.options.count) {
//Создаем контейнер, куда будем перемещать все элементы, которые нужно скрыть.
var container = document.createElement('div');
container.className = 'loadContainer';
//Создаем кнопку для раскрытия списка
var showAll = document.createElement('div');
showAll.className = 'loadMore';
showAll.innerHTML = self.options.textMore;
//Присваиваем контейнер в наш элемент
elList[i].appendChild(container);
//Присваиваем кнопку в наш элемент
elList[i].appendChild(showAll);
//Выбираем все элементы, которые будем скрывать и отправлем их в контейнер
for(var j = 0; j < countChildren.length; j++) {
if(j > self.options.count - 1) {
container.appendChild(countChildren[j]);
}
}
//Поочередно разворачиваем и сворачиваем контейнер при нажатии
showAll.onclick = function() {
this.previousElementSibling.classList.toggle('active');
}
}
});
}
(function(window) {
window.loadElements = function(element, options) {
this.element = element;
new LoadElements(this, options);
}
return this;
})(window);
document.querySelectorAll('.filter__item').loadElements();
}
<div class="filter__wrapper">
<form action="" class="filter">
<div class="filter__item">
<div class="filter__name">Производители</div>
<div class="filter__option--wrapper">
<div class="filter__option">
<input id="check1" type="checkbox"/>
<label for="check1">ACV</label>
</div>
<div class="filter__option">
<input id="check2" type="checkbox"/>
<label for="check2">AE&T</label>
</div>
<div class="filter__option">
<input id="check3" type="checkbox"/>
<label for="check3">Ariston</label>
</div>
<div class="filter__option">
<input id="check4" type="checkbox"/>
<label for="check4">Armada</label>
</div>
<div class="filter__option">
<input id="check5" type="checkbox"/>
<label for="check5">Baxi</label>
</div>
<div class="filter__option">
<input id="check6" type="checkbox"/>
<label for="check6">Buderus</label>
</div>
<div class="filter__option">
<input id="check7" type="checkbox"/>
<label for="check7">Chaffoteaux</label>
</div>
<div class="filter__option">
<input id="check8" type="checkbox"/>
<label for="check8">Matrix</label>
</div>
<div class="filter__option">
<input id="check9" type="checkbox"/>
<label for="check9">MATRIX</label>
</div>
</div>
</div>
</form>
</div>
|
Stay_Strong,
может тот кто лучше знает ООП подскажет. |
Stay_Strong, extend из конструктора убери не красиво он там)
|
Rise,
Почему нельзя так обрабатывать extend? И как мне передать мой селектор? Как только я попадаю в функцию инициализации, вывожу console.log(this) и на выходе получаю весь документ, вместо моего селектора, к которому применяю метод. Вы понимаете в этом, могу взять урок по скайпу за плату. |
| Часовой пояс GMT +3, время: 21:29. |