4 / 4 / 2
Регистрация: 28.03.2011
Сообщений: 94
1

Работа с DOM деревом

19.07.2011, 02:27. Показов 1848. Ответов 5
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Последний час сидел мучился с поиском элементов и работой с DOM деревом. В итоге получил нелепую и некрасивую цепочку...В общем ситуация такая:
html:
HTML5
1
2
3
4
5
6
<div class="top">
   <img src="https://www.cyberforum.ru/images/news/0.jpg" id="img" />
   <ul>
      <a href="page.php"><li id="1">текст</li></a>
   </ul>
</div>
JS:
Javascript
1
$("li").parent("a").parent("ul").parent(".top").children("#img").attr("src","https://www.cyberforum.ru/images/news/1.jpg");
Смысл в том что бы от тега li добраться до тега img. В принципе у меня работает и нынешний вариант, но что-то мне подсказывает что это должно выглядеть более красиво...или же мой вариант единственный возможный, потому что перерыв документацию и опробовав кучу вариантов с фильтрами и селекторами, я пришёл только к такому варианту?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.07.2011, 02:27
Ответы с готовыми решениями:

Обновление DOM. Работа с созданными jquery элементами
Добрый день, господа! Избитая, но все еще актуальная тема: Не получается работать с созданными...

Работа с деревом DOM
Здравствуйте! Прошу подсказать как лучше выполнить задачу. Необходимо в контейнере Div, с...

Работа с DOM
Есть сайт, все красивенько, но это только коробка, я никогда не делал такого. Знаю только что это...

работа с DOM XML
Есть xml документ и нужно используя методы DOM XML, сформировать HTML страницу, содержащую таблицу...

5
Йошь-мыслитель
126 / 120 / 26
Регистрация: 22.02.2009
Сообщений: 706
Записей в блоге: 5
20.07.2011, 08:34 2
TARAKANhoy, если Вы хотите обратиться к конкретному элементу, необходимо использовать id или псевдо-классы first, last и им подобные. Запись $('li') вернёт коллекцию из всех тегов li на странице. А вот, скажем запись $('#1') по идее должна вернуть конкретный элемент, но не вернёт, так как id должен начинаться с буквы. Ко всему прочему в Вашем HTML-коде вопиющая ошибка. Дочерними элементами тега списка ul могут быть только теги элемента li.

Исправленный HTML:
HTML5
1
2
3
4
5
6
<div class="top">
  <img src="https://www.cyberforum.ru/images/news/0.jpg" id="img"/>
  <ul>
    <li id="id1"><a href="page.php">текст</a></li>
  </ul>
</div>
В этом случае конструкция, если следовать Вашей логике, должна быть такой:
Javascript
1
$("#id1").parent().parent().children("#img").attr("src","https://www.cyberforum.ru/images/news/1.jpg");
Однако, если по уму, то конструкция должна быть такой:
Javascript
1
$("#img").attr("src","https://www.cyberforum.ru/images/news/1.jpg");
1
4 / 4 / 2
Регистрация: 28.03.2011
Сообщений: 94
20.07.2011, 15:31  [ТС] 3
Дело в том что мне нужно добраться именно от li до img, а так бы конечно я просто указал идентификатор и все дела)

Поместил li в тег a потом что мне нужно что бы ссылка была кликабельна по всей области распространения тега li. Понимаю конечно, это противоречит стандартам, но мне так проще для реализации.

Идентификатор в li я использую как контейнер для числа, по моему коду при наведении на li у меня это число из контейнера летит в другое место.

Но в общем спасибо)
0
Йошь-мыслитель
126 / 120 / 26
Регистрация: 22.02.2009
Сообщений: 706
Записей в блоге: 5
22.07.2011, 21:22 4
Цитата Сообщение от TARAKANhoy Посмотреть сообщение
Дело в том что мне нужно добраться именно от li до img, а так бы конечно я просто указал идентификатор и все дела)
Для чего такие извращения? О_о Присвоили ID рисунку какой-нибудь и всего делов.
Цитата Сообщение от TARAKANhoy Посмотреть сообщение
Поместил li в тег a потом что мне нужно что бы ссылка была кликабельна по всей области распространения тега li.
В чём проблема? заключите ВСЁ содержимое элемента списка.
0
4 / 4 / 2
Регистрация: 28.03.2011
Сообщений: 94
22.07.2011, 22:14  [ТС] 5
Цитата Сообщение от Xander Bass Посмотреть сообщение
Для чего такие извращения? Присвоили ID рисунку какой-нибудь и всего делов.
Ну потому что по реализации программы мне так нужно! Тут я привёл простой кусочек кода что бы было проще понять суть проблемы) Вот кусок моего настоящего jquery к этому элементу:
Javascript
1
2
3
4
5
6
$(".cb_top li").mouseover(function(){
        var img = $(this).attr("id");
        $(this).parent().parent().parent().children("#cb_img").attr("src","images/news/"+img);
        $(this).parent("").parent("").children("").children("").removeClass("cb_active");
        $(this).addClass("cb_active");
});
Цитата Сообщение от Xander Bass Посмотреть сообщение
В чём проблема? заключите ВСЁ содержимое элемента списка.
Непонял...что и куда заключить? Если заключить ссылку в тег li то кликабельным будет только область текста, а мне нужно что бы весь тег li был кликабельным (по прописанному стилю css он у меня занимает область 121x53px). Если делать из расчёта на стандарты, мне так же придётся прописывать ссылкам область покрытия размером 121x53px, и ещё не факт что всё идеально встанет.
0
6 / 6 / 1
Регистрация: 21.02.2014
Сообщений: 28
24.12.2014, 16:19 6
Ребят вот пишу скрипт и столкнулся с такой проблеммой.
у меня в переменной arr_prof лежит вот что
HTML5
1
<span id="profession_id_004"><a href="http://school-room.loc/?id_prof=004">Электромонтер по ремонту и обслуживанию грузоподъемных машин</a></span>
Как мне достать оттуда только 004 ?
Голову уже сломал
0
24.12.2014, 16:19
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.12.2014, 16:19
Помогаю со студенческими работами здесь

HTML DOM как с использованием Javascript создать узлы DOM
Доброго времени суток. хочу через Javascript по событию onclick добавить в html документ что то...

Написать скрипт, рекурсивно обходящий дерево DOM страницы dom.html, начиная от корня DOM
Написать скрипт на языке JavaScript, рекурсивно обходящий дерево DOM страницы dom.html, начиная от...

Работа с деревом
всем привет! помогите с задачкой. есть форма в которой прорисовываются узлы дерева и есть вторая...

Работа с бинарным деревом
Помогите пожалуйсто переделать две последнии функции без использования высших функций import...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru