С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Sergio Leone
2467 / 1112 / 579
Регистрация: 07.06.2014
Сообщений: 3,259
1

Как обрамить элементы в дивы

23.07.2015, 21:56. Просмотров 550. Ответов 4
Метки нет (Все метки)

профессионалы и волшебники, к вашим знаниям и умениям я уповаю.

суть такая.
есть код на jQuery, который ответ сервера преобразует в линейную структуру.

получается примерно такое:
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="tree tree-level0" data-id="1" data-parent-id="0">
<div class="tree tree-level0" data-id="2" data-parent-id="0">
<div class="tree tree-level0" data-id="3" data-parent-id="0">
<div class="tree tree-level1" data-id="4" data-parent-id="3">
<div class="tree tree-level2" data-id="5" data-parent-id="4">
<div class="tree tree-level2" data-id="6" data-parent-id="4">
<div class="tree tree-level1" data-id="7" data-parent-id="3">
<div class="tree tree-level0" data-id="8" data-parent-id="0">
<div class="tree tree-level1" data-id="9" data-parent-id="8">
<div class="tree tree-level1" data-id="10" data-parent-id="8">
<div class="tree tree-level0" data-id="11" data-parent-id="0">
для создания уровней вложенности мне очень нужно обрамить внутренние уровни в новый div
<div class="newlevels">
т.е. нужно получить такое:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="tree tree-level0" data-id="1" data-parent-id="0">
<div class="tree tree-level0" data-id="2" data-parent-id="0">
<div class="tree tree-level0" data-id="3" data-parent-id="0">
<div class="newlevels">
  <div class="tree tree-level1" data-id="4" data-parent-id="3">
    <div class="newlevels">
        <div class="tree tree-level2" data-id="5" data-parent-id="4">
        <div class="tree tree-level2" data-id="6" data-parent-id="4">
    </div>
  <div class="tree tree-level1" data-id="7" data-parent-id="3">
</div>
<div class="tree tree-level0" data-id="8" data-parent-id="0">
    <div class="newlevels">
       <div class="tree tree-level1" data-id="9" data-parent-id="8">
       <div class="tree tree-level1" data-id="10" data-parent-id="8">
    </div>
<div class="tree tree-level0" data-id="11" data-parent-id="0">
отступы я нарисовал для наглядности, они, по сути, совсем не обязательны.

Люди добрые, не бросьте, пожалуйста, помогите с кодом на jQuery!


ну и добавление.
я попробовал написать код, так проблема в том, что если я в цикле пытаюсь вставить ОДНУ строчку через jQuery, эта библиотека вставляет ДВЕ (библиотека явно пытается открыть тэг и закрыть его). неужели это никак нельзя обойти?!!!!!!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.07.2015, 21:56
Ответы с готовыми решениями:

Как фильтровать/сортировать дивы (пример внутри)?
Всем привет Делаю сайт витрину, на очень простой ЦМС на файлах без базы...

Как расположить дивы сверху вниз - слева направо?
Задача состоит в том, что-бы блоки располагались сначала сверху-вниз, а потом —...

Каждое слово обрамить тегом span
Добрый вечер, У меня есть тестовая строка и мне нужно каждое слово обрамить...

Как при клике взять ID родителя и скрыть дивы с классом взятого ранее родителя?
Здравствуйте друзья, столкнулся с задачкой для решения которой у меня не...

Вывести дивы через js
Доброго дня друзья Узнал про массивы в js и решил поэксперименитровать с...

4
Armi
310 / 104 / 69
Регистрация: 18.04.2015
Сообщений: 342
23.07.2015, 22:46 2
Javascript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $("[data-id]").each(function(){
        
      var d = $(this).attr("data-id");  
       var p = $("[data-parent-id="+d+"]").wrapAll("<div class='newlevels' id='child"+d+"'></div>");
        $(this).after($("#child"+d));
    });
        
    
});
1
Sergio Leone
2467 / 1112 / 579
Регистрация: 07.06.2014
Сообщений: 3,259
23.07.2015, 23:32  [ТС] 3
Armi, спасибо большое-пребольшое за ответ, но этот код не делает то, что мне нужно.

по моему, wrapAll под себя затягивает нужные элементы, нарушается порядок элементов.
т.е. вместо:
HTML5
1
2
3
4
5
6
7
8
9
<div class="newlevels">
  <div class="tree tree-level1" data-id="4" data-parent-id="3">
    <div class="newlevels">
        <div class="tree tree-level2" data-id="5" data-parent-id="4">
        <div class="tree tree-level2" data-id="6" data-parent-id="4">
    </div>
  <div class="tree tree-level1" data-id="7" data-parent-id="3">
</div>
....
я получаю примерно такой код:
HTML5
1
2
3
4
5
6
7
8
9
<div class="newlevels" id="child3">
  <div class="tree tree-level1" data-id="4" data-parent-id="3">
  <div class="tree tree-level1" data-id="7" data-parent-id="3">
</div>
<div class="newlevels" id="child4">
        <div class="tree tree-level2" data-id="5" data-parent-id="4">
        <div class="tree tree-level2" data-id="6" data-parent-id="4">
</div>
</div>
плюс ещё откуда-то появляются паразитические <div class="newlevels" id="child3"></div>
возможно, что я криво адаптирую ваше решение в рабочий проект..

Вам очень сложно сделать пример в песочнице?
0
Armi
310 / 104 / 69
Регистрация: 18.04.2015
Сообщений: 342
23.07.2015, 23:50 4
http://jsfiddle.net/1paqvjj9/12/ у меня работает именно так как вы просили т. е. вложенные идут в контейнере после родителя.

Добавлено через 1 минуту
Javascript
1
 var p =
вот это присваивание можно удалить оно не нужно
0
Sergio Leone
2467 / 1112 / 579
Регистрация: 07.06.2014
Сообщений: 3,259
23.07.2015, 23:55  [ТС] 5
спасибо!
да, вижу, что работает!
осталось разобраться, почему у меня в рабочем проекте не работает, кто и что мешает!
0
23.07.2015, 23:55
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.07.2015, 23:55

Новые дивы, без обработчика
1. Предположим, у нас есть дивы с классом. 2. Назначаем на все такие дивы...

Выпадающие дивы для FAQ
Добрый день! Нашел вот такое решение для реализации &quot;выпадающих дивов&quot; для...

Резиновые дивы с прокруткой Java Script
Доброго времени суток. Проблема вот в чем - нужно сделать весь сайт резиновым,...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru