2

Написал такую менюшку

        window.onload = function(){
            var item = document.getElementById("main_nav").children;
            for( var i = 0; i < item.length; i++){
                $(item[i]).click(function(e){
                    e.preventDefault();
                    var attr = this.firstChild.getAttribute("href");
                    this.firstChild.style.color = "white";   
                    $('html, body').animate({
                        scrollTop:$(attr).offset().top - 100
                    }, 1000);                       
                    console.log(mystyle);
                });
            };
        }

HTML

<div class="wrap">
    <ul id="main_nav">
        <li><a href="#veryTop">Самый верх</a></li>
        <li><a href="#top">Верх</a></li>
        <li><a href="#midle">Середина</a></li>
        <li><a href="#footer">Подвал</a></li>
        <li><a href="#copy">Копирайт</a></li>
    </ul>
    <a name="veryTop" id="veryTop">Самый верх</a>
    <a name="top" id="top">Верх</a>
    <a name="midle" id="midle">Середина</a>
    <a name="footer" id="footer">Подвал</a>
    <a name="copy" id="copy">Копирайт</a>
</div>

И естественно мне захотелось, что бы выбранный пункт меню подсвечивался, на что я написал такую строку, this.firstChild.style.color = "white";, но если я нажму на второй пункт меню, первый так же останется белого цвета, как и вновь выбранный, единственное что я смог придумать, это взять все соседние элементы и на них повесить .style.color = "blue";, но как выбрать все элементы и справа и слева? UPDATE

$(item[i]).click(function(e){
                        e.preventDefault();
                        var attr = this.firstChild.getAttribute("href");
                        var z = document.getElementsByClassName("jj"); 
                        z.classList.remove("jj"); 
                        this.classList.add("jj");

                        $('html, body').animate({
                            scrollTop:$(attr).offset().top - 100
                        }, 1000);                      
                        console.log(z.classList);
                    });

2 ответа 2

6

Для того, чтобы найти соседние элементы в DOM при помощи Vanilla JS, существуют специальные свойства у элемента:

  1. .nextSibling - возьмет следующий элемент на одном уровне дерева, если такого нет, то вернет null;
  2. .previousSibling - возьмет предыдущий элемент на одном уровне дерева, если такого нет, то вернет null.

С их помощью можно построить циклы, которые соберут всех соседей, причём надо следить за тем, чтобы элемент был HTMLElement, а не текстовым узлом, например, вот так:

function getSiblings(elem) {
    var siblings = [];
    var sibling = elem;
    while (sibling.previousSibling) {
        sibling = sibling.previousSibling;
        sibling.nodeType == 1 && siblings.push(sibling);
    }

    sibling = elem;
    while (sibling.nextSibling) {
        sibling = sibling.nextSibling;
        sibling.nodeType == 1 && siblings.push(sibling);
    }

    return siblings;
}

Если использовать jQuery, тогда взять все элементы можно просто вот так:

$('#main_nav').siblings();

Вот небольшое сравнительное тестирование по времени. Странно, но почему-то в Хроме jQuery очень быстр, однако странно.

Но в Вашей ситуации, я бы посоветовал сделать немного по другому:

  1. вместо добавления inline-стиля вешать на элемент класс с нужным цветом, допустим .u-white-background;
  2. когда происходит новое событие, то просто ищем все элементы с таким классом в навигации, например так document.getElementById('main_nav').getElementsByClassName('u-white-background'); или даже так: document.getElementById('main_nav').querySelectorAll('u-white-background'); и удаляем с этих элементов этот класс.

Если все же очень хочется применять inline-стили, можно добавлять на элемент какой-нибудь data-атрибут, допустим data-checked, и при выборе нового пункта, ищем все элементы с таким атрибутом и меняем его цвет обратно. Кстати, для этого достаточно написать так: elem.style.color = '';

7
  • я в курсе как можно взять следующий и предыдущий, я спросил как взять "все элементы справа и слева" 5 окт 2015 в 12:52
  • @ГошкаТарасов, я и написал: "возьмет следующий элемент на одном уровне дерева, если такого нет, то вернет null". Я думаю при соответствующей сноровке можно построить циклы)
    – Rolandius
    5 окт 2015 в 12:55
  • 1
    @ГошкаТарасов В цикле перебирать свойства .nextSibling и .previousSibling соответственно. Можно сохранять их в массивах, чтобы потом не собирать опять. 5 окт 2015 в 12:55
  • @Rolandius смотрите, я обновил вопрос и сделал как вы посоветовали, но видимо что ото не допонял, почему не работает удаление класса? 5 окт 2015 в 14:07
  • 1
    .nextSibling и .previousSibling возвращают DOM узлы любого типа, в том числе текст и комментарии. Если нужны конкретно элементы, то можно воспользоваться .nextElementSibling и .previousElementSibling, но они не полностью кроссбраузерны. 5 окт 2015 в 14:58
5

На нативном JS функции будут выглядить вот так:

function getAllNextSiblings(element) {
    var out = [];
    while(element.nextSibling) {
        out.push(element = element.nextSibling);
    }

    return out;
}

function getAllPreviousSiblings(element) {
    var out = [];
    while(element.previousSibling) {
        out.push(element = element.previousSibling);
    }

    return out;
}

function getAllSiblings(element, include) {
    var out = getAllNextSiblings(element);
    out.concat(getAllPreviousSiblings(element));
    if(include)
        out.push(element);

    return out;
}

UPD Или можно сначала получить всех потомков родителя, и затем, если требуется, удалить наш element:

function getAllSiblings(element, include) {
    var siblings = element.parentNode.childNodes;
    if(include)
        return siblings;

    /** 1 **/
    var out = [];
    for(var i=0; i<siblings.length; i++)
        if(siblings[i] != element)
            out.push(siblings[i]);

    /** 2 **/
    // var out = Array.prototype.filter.call(siblings, function(sibling) { 
    //    return sibling != element;
    // });

    return out;
}
2
  • 1
    Ваш последний пример не работает, потому что childNodes возвращает не Array, а NodeList, а у него нет метода filter(). Исправьте, пожалуйста.
    – Rolandius
    5 окт 2015 в 13:45
  • @Rolandius, спасибо за исправление, поправил.
    – Fenex
    6 окт 2015 в 8:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.