Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   аналог .classList.contains для ID/другого аттрибута (https://javascript.ru/forum/events/81108-analog-classlist-contains-dlya-id-drugogo-attributa.html)

Faster 02.10.2020 06:44

аналог .classList.contains для ID/другого аттрибута
 
Доброе время суток, решаю интересную задачу и потребовалось определять есть ли в составе потомков элемента нужный мне элемент ...

первым на ум пришло детектить его через список классов структурой :
clicked_el.classList.contains(className)

но элементов много и они уникальны и придется сгенерировать кучу классов динамически и в общем все перебрать , возможно использовать конечно элемент id, находя любой у которого он есть а там длаее уже разбераться но хотелось бы создать свой атрибут конструкцией типа :
elemement.setAttribute("MyAttr", value)

и уже потом считать что если мышкой ткнули туда где есть у потомков атрибут MyAttr делать какие либо действия ...

пока что пришло в голову это перебрать всех потомков элемента и у всех проверять через .hasAttribute , но это реально как то печально и не красиво ... и да это AJAX окно и когда вчера после трех часов тыкания у меня был раскрыт TreeView d 1500 прогруженных элементов и я в него таким образом ткнул , хром слегка подафигел и повис .... в связи с чем есть вопрос

естьли аналог конструкции :

.classList.contains
но для своего аттрибута ?

voraa 02.10.2020 07:07

Чего то не то вы изобретаете
Не надо придумывать свои атрибуты. Для этого есть атрибут data-*
https://developer.mozilla.org/ru/doc...ributes/data-*
Для выбора элементов с нужными классами, атрибутами, потомков и проч есть querySelector(All)
https://developer.mozilla.org/ru/doc.../querySelector
https://developer.mozilla.org/ru/doc...erySelectorAll

Faster 02.10.2020 08:38

voraa, ну про data- я думал но он ничем не хуже своегопридуманного так как так же нет функций под него

насчет querySelector(All) вы плохо прочитали или я плохо объяснил ...
у меня есть извесный элемент ... ОН ЕСТЬ и он не document а , querySelector свойство только docement'а так что не вариант :cray:

рони 02.10.2020 09:06

Цитата:

Сообщение от Faster
querySelector свойство только docement'а

:nono:

voraa 02.10.2020 09:16

Цитата:

Сообщение от Faster
data- я думал но он ничем не хуже своегопридуманного так как так же нет функций под него

Не рекомендуется придумывать свои атрибуты. Нет никакой гарантии, что в какое то время не появится атрибут с таким именем. Именно для этого были придуманы атрибуты data-*
Цитата:

Сообщение от рони
а , querySelector свойство только docement'а так что не вариант

querySelector и querySelectorAll есть у любого элемента.

Если нужен какой то конкретный элемент, то использовать id самое оно.
пусть есть элемент parent и нам надо узнать входит ли в число его потомков элемент с id='myid'

parent.contains(document.getElementById('myid')) // true - если потомок, false - если нет.

Если у элемент потомка есть data-elem='myelem', то
parent.contains(document.querySelector('[data-elem=myelem]')) // true - если потомок, false - если нет.
или
parent.querySelector('[data-elem=myelem]') // вернет сам элемент с data-elem=myelem, если потомок, null - если нет

Faster 05.10.2020 02:07

voraa, спасибо !

был уверен что querySelectorAll ест ьтолько у документа ... эх вот почему я говорю нельзя всем заниматься одновременнно :) тогда задача упрощается

Faster 05.10.2020 05:24

Не прошло :(
 
e=mouse event
function plg_m1vpopup_CheckMenu(e) {
    var el = e.srcElement || e.target;
    console.log("CheckMenu:" + el.nodeName);
    //проверяем всех предков
    let way = "";
    do {
        way = el.nodeName;
        console.log(way);
        if (el.nodeName == 'LI' && el.hasAttribute('data-m1vpopupmenuid')) {
            //Найден предок с признаком меню
            console.log("found [data-m1vpopupmenuid] in " + way + " element =" + el.nodeName);//DEBUG:
            return el;
        }
    } while (el = el.parentNode);

    console.log("[data-m1vpopupmenuid] not found");
    return false;


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

Есть ли вариант поизящнее вариант или нет ?

voraa 05.10.2020 07:23

Извините, а вы для каких браузеров это делаете (по каким книжкам js изучаете)? Вряд ли нужно сейчас писать в расчете на ИЕ8 и более ранние.

Сейчас не нужны никакие e.srcElement. Только e.target
И есть функция elt = element.closest(selectors)
см https://developer.mozilla.org/ru/doc...lement/closest

Есть еще функция matches
https://developer.mozilla.org/ru/doc...lement/matches

Поэтому
el.nodeName == 'LI' && el.hasAttribute('data-m1vpopupmenuid')
записывается, как
el.matches('li[data-m1vpopupmenuid]')

А весь цикл, как
el = e.target.closest('li[data-m1vpopupmenuid]') // 'элемент-предок, если есть такой, null - если нет

Faster 05.10.2020 09:29

изучаю ? не незнаю такого слова :)

по сути то что я делаю юзается в подразделени РЖД , и поверь мне IE8 ты тут никого не удевишь ...

по этому ипишу такие костыли...


за остальное спасибо ... прочту

JS не входет в сферу моих интересов , я всю жизнь в вэбе писал только бакэнды , а сейчас как бы нужно ..

та кто я вообще низкоуровневый програмист / промышленный програмист :)


Часовой пояс GMT +3, время: 05:19.