перевести из Jquery в JavaScript

@gregories · Регистрация: 15.12.2018

Студворк — интернет-сервис помощи студентам

Всем доброй ночи!
Прошу помочь грамотно перевести из Jquery в JavaScript.
Изучаю пока только JavaScript, до библиотеки Jquery не дошёл, мало знаю его синтаксис, вернее практически не знаю

Имеется следующий код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function () {                             // когда страница загружена
    $('.menu_point a').each(function () {      // проходим по нужным нам ссылками
        var location = window.location.href // переменная с адресом страницы
        var link = this.href                // переменная с url ссылки
        var result = location.match(link);  // результат возвращает объект если совпадение найдено и null при обратном
 
        if(result != null) {                // если НЕ равно null
            $(this).addClass('menu_current');    // добавляем класс
        }
    });
});

Суть ясна - вычислить адрес текущей страницы, найти в списке пунктов меню пункт с адресом текущей страницы и присвоить ему дополнительно класс menu_current.
В целом переменные вижу, цикл вижу, сравнение вижу, но как грамотно перевести в ванильный JS пока затруняюсь - прошу помощи =)

Qwerty_Wasd · 08.05.2019, 01:57

Сообщение от gregories

вычислить адрес текущей страницы

Его не нужно вычислять, клиент за Вас его уже знает, создав объект window, с полем location, инициализированным как объект, в котором присутствует поле href, инициализированное адресом ресурса.

Сообщение от gregories

найти в списке пунктов меню пункт с адресом текущей страницы и присвоить ему дополнительно класс menu_current

как вариант

JavaScript
1
2
3
4
5
window.addEventListener(`load`, () = > {
  document.querySelectorAll(`.menu_point a`).forEach( e => {
    if (~window.location.href.indexOf(e.href)) e.classList.add(`menu_current`);
  })
});

@gregories · 08.05.2019, 02:32 **[ТС]**

Qwerty_Wasd,
я так понимаю вы используете ECMAScript6? =)
Потому что тоже с ним пока незнаком.
объявление анонимной функции узнал

Попробую перевести:

при загрузке окна addEventListener(`load`
объявляете анонимную функцию
которая для всех объектов с классом querySelectorAll(`.menu_point a`)
включает условие (~window.location.href.indexOf(e.href) - за тильду спасибо не знал раньше )
далее добавляете в список классов menu_current.

Да красиво поучилось и получилось ))
Ожидал какие-нибудь document.getElementsByClassname и т.п.

Вопрос по location - все страницы имеют вид - http://www.sitename.com/pagename
кроме главной страницы - она имеет вид http://www.sitename.com
соответственной её href будет всегда совпадать ~window.location.href.indexOf(e.href) и ей будет всегда присвоен menu_current

возможно ли реализовать данный скрипт через location.pathname?
я так понимаю pathname это всё что после "/"
Или не так понимаю

Просто не хочется ссылку на главную страницу делать вида http://www.sitename.com/index

Qwerty_Wasd · 08.05.2019, 03:40

gregories,

Сообщение от gregories

соответственной её href будет всегда совпадать ~window.location.href.indexOf(e.href) и ей будет всегда присвоен menu_current

на момент написания, данной инфы не было, а посему предположил наличие относительного адреса в href. Проще предоставить верстку, чтобы на кофейной гуще не гадать.

Сообщение от gregories

возможно ли реализовать данный скрипт через location.pathname?

да.

Сообщение от gregories

я так понимаю pathname это всё что после "/"

после первого / стоящего после доменного имени.

Сообщение от gregories

Попробую перевести:
при загрузке окна addEventListener(`load`
объявляете анонимную функцию
которая для всех объектов с классом querySelectorAll(`.menu_point a`)
включает условие (~window.location.href.indexOf(e.href) - за тильду спасибо не знал раньше )
далее добавляете в список классов menu_current.

При событии полной загрузки окна со всеми upload-ресурсами, получаем экземпляр коллекции узлов NodeList, апи которой в числе прочего, имеет метод forEach. Обойдя с его помощью колекцию, условием проверяем наличие нужных элементов в ней. При совпадении - добавляем класс.

Сообщение от gregories

(~window.location.href.indexOf(e.href) - за тильду спасибо не знал раньше )

запись ~window.location.href.indexOf(e.href) в данном случае === window.location.href.indexOf(e.href) > -1 - прост короче.

Для абсолютного адреса как в Вашем случае, проще сделать так

JavaScript
1
window.addEventListener(`load`, () = > document.querySelector(`.menu_point a[href=`${window.location.href}`]`).classList.add(`menu_current`));

@gregories · 08.05.2019, 11:00 **[ТС]**

Qwerty_Wasd,

Сообщение от Qwerty_Wasd

Проще предоставить верстку, чтобы на кофейной гуще не гадать.

Верстка простая, обычное html меню списком:

HTML5
1
2
3
4
5
6
7
8
9
10
        <nav>
            <ul class="menu">
                <li class="menu_point"><a href="http://anastasia-alba.com/">ГЛАВНАЯ</a></li>
                <li class="menu_point"><a href="about">ОБО МНЕ</a></li>
                <li class="menu_point"><a href="blog">БЛОГ</a></li>
                <li class="menu_point"><a href="exicises">ЗАНЯТИЯ</a></li>
                <li class="menu_point"><a href="personal">ПЕРСОНАЛЬНЫЙ ТРЕНИНГ</a></li>
                <li class="menu_point"><a href="events">МЕРОПРИЯТИЯ</a></li>
            </ul>
        </nav>

Pathname в моём случае действует аналогично href - выделяет главную страницу в любом случае

JavaScript
1
window.location.pathname.indexOf(e.pathname)

Сообщение от Qwerty_Wasd

window.addEventListener(`load`, () = > {
* document.querySelectorAll(`.menu_point a`).forEach( e => {
* * if (~window.location.href.indexOf(e.href)) e.classList.add(`menu_current`);
* })
});

@amr-now · 08.05.2019, 13:04

Вот надежный скрипт перехода между страницами с учетом возможно отсутствующих .html и

index.html

Поскольку скрипт очень простой, получилось и в ES5 реализовать:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .menu_current {
            color: red;
        }
    </style>
</head>
<body>
    <nav>
        <ul class="menu">
            <li class="menu_point"><a href="index">ГЛАВНАЯ</a></li>
            <li class="menu_point"><a href="about">ОБО МНЕ</a></li>
            <li class="menu_point"><a href="blog">БЛОГ</a></li>
            <li class="menu_point"><a href="exicises">ЗАНЯТИЯ</a></li>
            <li class="menu_point"><a href="personal">ПЕРСОНАЛЬНЫЙ ТРЕНИНГ</a></li>
            <li class="menu_point"><a href="events">МЕРОПРИЯТИЯ</a></li>
        </ul>
    </nav>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Делаем полную совместимость адреса с href
            var loc = window.location.pathname.match(/^\/([\s\S]*?)(\.html)?$/)[1] || "index";
 
            var items = document.querySelectorAll(".menu_point a");
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (item.getAttribute("href") === loc) {
                    item.classList.add("menu_current");
                    break;
                }
            }
        });
    </script>
</body>
</html>

Здесь по условию задачи не понятно, к чему надо прицеплять класс - к <li> или <a>
------
Прикол этих адресов в том, что пользователь может что попало вводить
http://anastasia-alba.com
http://anastasia-alba.com/index
http://anastasia-alba.com/index.html

Добавлено через 1 минуту
-----
http://anastasia-alba.com/index.html тоже подправьте. Косячит

@gregories · 27.05.2019, 14:03 **[ТС]**

amr-now,
спасибо за ответ
у меня все файлы php т.к. подключаю header и footer и прочие повторяющиеся элемента через php include
в т.ч. index.php и прочие

Здесь рассчитано на то что пользователь не будет ничего вводить - т.к. это уже не пользователь а какой-то отладчи или ещё кто-нибудь - обычные сайт для обычных людей без стремления к разбору =))

Я так понимаю, что в вашем примере ссылка на главную страницу всё равно будет sitename.com/index ?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@gregories 1 / 1 / 0 Регистрация: 15.12.2018 Сообщений: 52
	08.05.2019, 02:32 [ТС]
	Qwerty_Wasd, я так понимаю вы используете ECMAScript6? =) Потому что тоже с ним пока незнаком. объявление анонимной функции узнал Попробую перевести: при загрузке окна addEventListener(`load` объявляете анонимную функцию которая для всех объектов с классом querySelectorAll(`.menu_point a`) включает условие (~window.location.href.indexOf(e.href) - за тильду спасибо не знал раньше ) далее добавляете в список классов menu_current. Да красиво поучилось и получилось )) Ожидал какие-нибудь document.getElementsByClassname и т.п. Вопрос по location - все страницы имеют вид - http://www.sitename.com/pagename кроме главной страницы - она имеет вид http://www.sitename.com соответственной её href будет всегда совпадать ~window.location.href.indexOf(e.href) и ей будет всегда присвоен menu_current возможно ли реализовать данный скрипт через location.pathname? я так понимаю pathname это всё что после "/" Или не так понимаю Просто не хочется ссылку на главную страницу делать вида http://www.sitename.com/index 0

@gregories 1 / 1 / 0 Регистрация: 15.12.2018 Сообщений: 52
	27.05.2019, 14:03 [ТС]
	amr-now, спасибо за ответ у меня все файлы php т.к. подключаю header и footer и прочие повторяющиеся элемента через php include в т.ч. index.php и прочие Здесь рассчитано на то что пользователь не будет ничего вводить - т.к. это уже не пользователь а какой-то отладчи или ещё кто-нибудь - обычные сайт для обычных людей без стремления к разбору =)) Я так понимаю, что в вашем примере ссылка на главную страницу всё равно будет sitename.com/index ? 0

перевести из Jquery в JavaScript

Решение