Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Преобразовать JQ объект в обычный DOM (https://javascript.ru/forum/jquery/80461-preobrazovat-jq-obekt-v-obychnyjj-dom.html)

win32s 07.06.2020 14:31

Преобразовать JQ объект в обычный DOM
 
Здравствуйте
Тупой вопрос, но не могу сам справиться. Есть код, вида
$("#E1").click(function() .. и тут что-то происходит..


Мне нужно как-то получить значение - InnerText из элемента, расположенного чуть повыше. Написал такую конструкцию
var x = document.getElementById('E1');
console.log(x.parentElement.parentElement.parentElement.children[1].innerText);


Но проблема в том, что не хотелось бы делать двойную работу, можно ли как-то "преобразовать" $("E1") в переменную х, чтобы не вызывать дополнительно getElementById ? Или средствами Jquery получить этот текст (пробовал
$(this).parent().parent().parent().children()['1']
, почему-то не работает).

Я понимаю, что код ужасный, но уж какой есть.

laimas 07.06.2020 14:41

$("#E1").click(function() тут this, это #E1, а то что выше можно найти как closest(селектор)

Белый шум 08.06.2020 01:57

win32s, доступ по индексу и возвращает обычный DOM:

$(this).parent().parent().parent().children()[1].innerText

или
$(this).parent().parent().parent().children().eq(1).text()

или
this.parentElement.parentElement.parentElement.children[1].innerText

laimas 08.06.2020 02:06

Белый шум, зачем же, если в обработчике this уже и возвращает ссылку на DOM элемент, да и зачем так много раз "проклинать предков". :)

this.closest("selector")

Белый шум 08.06.2020 02:37

laimas, про closest вы уже рассказали, я лишь немного дополнил ответ.

win32s 08.06.2020 20:03

Спасибо, все работает.
Подскажите еще, в чем отличие $(this) и this в контексте jQuery? Или где можно почитать?

laimas 08.06.2020 20:13

Цитата:

Сообщение от win32s
$(this) и this в контексте jQuery?

$(this) - это JQ объект. Чтобы получить DOM, то либо методом .get(0), либо просто указав индекс, как выше писал Белый шум. Вот только бессмысленно так поступать, если требуется DOM объект, а не JQ, так как ссылка на него в обработчике всегда есть - this. Это как вместо того чтобы просто получить в обработчике значение this.value, делать это так $(this).val(). Правда есть отличие в этом - если определен $.valHooks, то $(this).val() вернет значение с удаленными крайними пробелами.

http://jquery.page2page.ru/index.php5/On

рони 08.06.2020 20:20

win32s,
если грубо
просто this, это либо сам элемент или объект jQuery вида {0 : элемент};
$(this) это только объект jQuery {0 : элемент}

laimas 08.06.2020 20:42

win32s, в обработчике выполнить console.log(this, $(this)), это будет визуализация того, что рони написал.

Белый шум 08.06.2020 21:33

win32s,
this - это указатель на контекст функции, который jQuery в своих обработчиках всегда устанавливает на соответствующий DOM элемент.
Читать тут: https://api.jquery.com/Types/#Function

$( ) - стандартная функция jQuery, которая возвращает объект jQuery. Если ей передать в качестве параметра элемент DOM, то она вернёт не пустой объект jQuery, а с указателем на этот элемент. Примеры:
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
   console.log( *!* $(document) */!* );
   console.log( *!* $(window) */!* );
   console.log( *!* $(this) */!* );
   $(document).click(function(event){ console.log( *!* $(event.target) */!* ); })
</script>
</head><body><p>Кликни <span>тут...</span></p></body>
Читать тут: https://api.jquery.com/Types/#jQuery


Цитата:

Сообщение от рони
просто this, это ... или объект jQuery вида {0 : элемент};

Можно подробнее про это "или"? В каких случаях там будет объект jQuery?


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