Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2020, 07:10
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Как построить полный путь до элемента дерева?
День добрый.
Как найти конкретный элемент дерева понятно.
Как найти всех родителей этого элемента?
Имеем:
function setActive(str='',source=[]){
    if(source.length==0 || str==''){
        return source
    }
    source.forEach(function(item,index){
        if(item.link == str){
            item.active=true;
        }else{
            item.active=false;
            if(item.children.length > 0){
				item = setActive(str,item.children);
            }
        }
    });
    return source;
}

var link = 'page_24',
	tree = [
		{
			"id": "9",
			"children": [
				{
					"id": "38",
					"children": [],
					"active": false,
					"link": "page_38"
				},
				{
					"id": "39",
					"children": [],
					"active": false,
					"link": "page_39"
				},
				{
					"id": "40",
					"children": [],
					"active": false,
					"link": "page_40"
				},
				{
					"id": "41",
					"children": [],
					"active": false,
					"link": "page_41"
				}
			],
			"active": false,
			"link": "page_9"
		},
		{
			"id": "10",
			"children": [
				{
					"id": "19",
					"children": [
						{
							"id": "13",
							"children": [
								{
									"id": "11",
									"children": [],
									"active": false,
									"link": "page_11"
								},
								{
									"id": "12",
									"children": [],
									"active": false,
									"link": "page_12"
								},
								{
									"id": "14",
									"children": [
										{
											"id": "15",
											"children": [],
											"active": false,
											"link": "page_15"
										},
										{
											"id": "16",
											"children": [],
											"active": false,
											"link": "page_16"
										},
										{
											"id": "17",
											"children": [],
											"active": false,
											"link": "page_17"
										},
										{
											"id": "18",
											"children": [],
											"active": false,
											"link": "page_18"
										},
										{
											"id": "20",
											"children": [],
											"active": false,
											"link": "page_20"
										},
										{
											"id": "21",
											"children": [],
											"active": false,
											"link": "page_21"
										},
										{
											"id": "22",
											"children": [],
											"active": false,
											"link": "page_22"
										},
										{
											"id": "23",
											"children": [],
											"active": false,
											"link": "page_23"
										}
									],
									"active": false,
									"link": "page_14"
								}
							],
							"active": false,
							"link": "page_13"
						},
						{
							"id": "24",
							"children": [],
							"active": false,
							"link": "page_24"
						},
						{
							"id": "25",
							"children": [],
							"active": false,
							"link": "page_25"
						},
						{
							"id": "28",
							"children": [],
							"active": false,
							"link": "page_28"
						}
					],
					"active": false,
					"link": "page_19"
				},
				{
					"id": "26",
					"children": [],
					"active": false,
					"link": "page_26"
				},
				{
					"id": "27",
					"children": [],
					"active": false,
					"link": "page_27"
				},
				{
					"id": "29",
					"children": [],
					"active": false,
					"link": "page_29"
				},
				{
					"id": "30",
					"children": [],
					"active": false,
					"link": "page_30"
				},
				{
					"id": "31",
					"children": [],
					"active": false,
					"link": "page_31"
				},
				{
					"id": "32",
					"children": [],
					"active": false,
					"link": "page_32"
				},
				{
					"id": "33",
					"children": [],
					"active": false,
					"link": "page_33"
				},
				{
					"id": "34",
					"children": [],
					"active": false,
					"link": "page_34"
				},
				{
					"id": "35",
					"children": [],
					"active": false,
					"link": "page_35"
				},
				{
					"id": "36",
					"children": [],
					"active": false,
					"link": "page_36"
				},
				{
					"id": "37",
					"children": [],
					"active": false,
					"link": "page_37"
				}
			],
			"active": false,
			"link": "page_10"
		},
		{
			"id": "8",
			"children": [],
			"active": false,
			"link": "page_8"
		},
		{
			"id": "1",
			"children": [],
			"active": false,
			"link": "page_1"
		},
		{
			"id": "3",
			"children": [
				{
					"id": "2",
					"children": [],
					"active": false,
					"link": "page_2"
				},
				{
					"id": "5",
					"children": [
						{
							"id": "4",
							"children": [],
							"active": false,
							"link": "page_4"
						}
					],
					"active": false,
					"link": "page_5"
				}
			],
			"active": false,
			"link": "page_3"
		}
	];

console.log(setActive(link,tree));

Задача выставить "active": true не только тому элементу у которого link совпадает с искомым, но и всем его родителям вверх по дереву.
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2020, 08:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

dpts,
RecursiveIterator / Рекурсивный итератор
https://github.com/nervgh/recursive-iterator
Ответить с цитированием
  #3 (permalink)  
Старый 11.12.2020, 08:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,742

Тут вопросы возникают по функции setActive
Что она возвращает? Если переданный source, то что означает

011 item = setActive(str,item.children);


Логичнее возвращать найденный item (null, если не найдено)

Второй вопрос. Кто устанавливает active:false для всего дерева в промежутках между поисками?
Должна ли эта функция делать это? Т.е не только устанавливать active:true для найденного и его предков, но и active:false для всех остальных?

Ну и еще замечание. При работе с деревьями лучше считать корень дерева обычным узлом. те должно быть так

tree = {
id:0,
active: false,
link: '',
children: [ // .... то, что сейчас у вас tree
]
}
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2020, 08:45
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Сообщение от voraa Посмотреть сообщение
Тут вопросы возникают по функции setActive
Что она возвращает? Если переданный source, то что означает

011 item = setActive(str,item.children);


Логичнее возвращать найденный item (null, если не найдено)

Второй вопрос. Кто устанавливает active:false для всего дерева в промежутках между поисками?
Должна ли эта функция делать это? Т.е не только устанавливать active:true для найденного и его предков, но и active:false для всех остальных?

Ну и еще замечание. При работе с деревьями лучше считать корень дерева обычным узлом. те должно быть так

tree = {
id:0,
active: false,
link: '',
children: [ // .... то, что сейчас у вас tree
]
}
1. Функция возвращает source в котором active:true искомый элемент.
2. В промежутках между поисками никто никому ничего не устанавливает
3. Не обязательно, это можно вынести в отдельную функцию, которая перед поиском будет все сбрасывать в active:false.
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2020, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

RecursiveIterator обход дерева объекта и установка значений
dpts,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
 <script src="https://nervgh.github.io/js/recursive-iterator.min.js"></script>
<pre>
  <script>
var link = 'page_24',
	tree = [
		{
			"id": "9",
			"children": [
				{
					"id": "38",
					"children": [],
					"active": false,
					"link": "page_38"
				},
				{
					"id": "39",
					"children": [],
					"active": false,
					"link": "page_39"
				},
				{
					"id": "40",
					"children": [],
					"active": false,
					"link": "page_40"
				},
				{
					"id": "41",
					"children": [],
					"active": false,
					"link": "page_41"
				}
			],
			"active": false,
			"link": "page_9"
		},
		{
			"id": "10",
			"children": [
				{
					"id": "19",
					"children": [
						{
							"id": "13",
							"children": [
								{
									"id": "11",
									"children": [],
									"active": false,
									"link": "page_11"
								},
								{
									"id": "12",
									"children": [],
									"active": false,
									"link": "page_12"
								},
								{
									"id": "14",
									"children": [
										{
											"id": "15",
											"children": [],
											"active": false,
											"link": "page_15"
										},
										{
											"id": "16",
											"children": [],
											"active": false,
											"link": "page_16"
										},
										{
											"id": "17",
											"children": [],
											"active": false,
											"link": "page_17"
										},
										{
											"id": "18",
											"children": [],
											"active": false,
											"link": "page_18"
										},
										{
											"id": "20",
											"children": [],
											"active": false,
											"link": "page_20"
										},
										{
											"id": "21",
											"children": [],
											"active": false,
											"link": "page_21"
										},
										{
											"id": "22",
											"children": [],
											"active": false,
											"link": "page_22"
										},
										{
											"id": "23",
											"children": [],
											"active": false,
											"link": "page_23"
										}
									],
									"active": false,
									"link": "page_14"
								}
							],
							"active": false,
							"link": "page_13"
						},
						{
							"id": "24",
							"children": [],
							"active": false,
							"link": "page_24"
						},
						{
							"id": "25",
							"children": [],
							"active": false,
							"link": "page_25"
						},
						{
							"id": "28",
							"children": [],
							"active": false,
							"link": "page_28"
						}
					],
					"active": false,
					"link": "page_19"
				},
				{
					"id": "26",
					"children": [],
					"active": false,
					"link": "page_26"
				},
				{
					"id": "27",
					"children": [],
					"active": false,
					"link": "page_27"
				},
				{
					"id": "29",
					"children": [],
					"active": false,
					"link": "page_29"
				},
				{
					"id": "30",
					"children": [],
					"active": false,
					"link": "page_30"
				},
				{
					"id": "31",
					"children": [],
					"active": false,
					"link": "page_31"
				},
				{
					"id": "32",
					"children": [],
					"active": false,
					"link": "page_32"
				},
				{
					"id": "33",
					"children": [],
					"active": false,
					"link": "page_33"
				},
				{
					"id": "34",
					"children": [],
					"active": false,
					"link": "page_34"
				},
				{
					"id": "35",
					"children": [],
					"active": false,
					"link": "page_35"
				},
				{
					"id": "36",
					"children": [],
					"active": false,
					"link": "page_36"
				},
				{
					"id": "37",
					"children": [],
					"active": false,
					"link": "page_37"
				}
			],
			"active": false,
			"link": "page_10"
		},
		{
			"id": "8",
			"children": [],
			"active": false,
			"link": "page_8"
		},
		{
			"id": "1",
			"children": [],
			"active": false,
			"link": "page_1"
		},
		{
			"id": "3",
			"children": [
				{
					"id": "2",
					"children": [],
					"active": false,
					"link": "page_2"
				},
				{
					"id": "5",
					"children": [
						{
							"id": "4",
							"children": [],
							"active": false,
							"link": "page_4"
						}
					],
					"active": false,
					"link": "page_5"
				}
			],
			"active": false,
			"link": "page_3"
		}
	];
const setParentsActiveValue = (link, source, value) => {
    for (let {node, path} of new RecursiveIterator(source)) {
        if (node == link) {
            console.log(path.join('.'), node);
            let obj = source;
            for (let key of path) {
                obj = obj[key];
                if (obj.hasOwnProperty('active')) {
                    console.log("id", obj.id);
                    obj.active = value
                }
            }
            break;
        }
    }
    return source
}
document.write(JSON.stringify(setParentsActiveValue(link,tree, true), "", 2))
  </script>
</pre>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 11.12.2020, 08:59
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Сообщение от рони Посмотреть сообщение
dpts,
Спасибо. Работает. Хоть и не понимаю пока сходу как - буду изучать.

Последний раз редактировалось dpts, 11.12.2020 в 09:26.
Ответить с цитированием
  #7 (permalink)  
Старый 11.12.2020, 09:29
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,742

Если слегка изменить условия
- Функция возвращает найденный item (source по нему всегда взять можно)

- Дерево оформлено с корневым узлом

- Функция очищает все остальные active

То получается совсем простая функция

<pre>
<script>

function setActive(str='',tree){
	let founditem = null
	for (const item of tree.children) {
		const res = setActive(str,item)
		founditem = founditem || res
	}
	if (!founditem && tree.link == str) founditem = tree;
	tree.active = !! founditem;
    return founditem;
}


let tree = {
			id:0,
			active: false,
			link: '',
			children: [
        {
            "id": "9",
            "children": [
                {
                    "id": "38",
                    "children": [],
                    "active": false,
                    "link": "page_38"
                },
                {
                    "id": "39",
                    "children": [],
                    "active": false,
                    "link": "page_39"
                },
                {
                    "id": "40",
                    "children": [],
                    "active": false,
                    "link": "page_40"
                },
                {
                    "id": "41",
                    "children": [],
                    "active": false,
                    "link": "page_41"
                }
            ],
            "active": false,
            "link": "page_9"
        },
        {
            "id": "10",
            "children": [
                {
                    "id": "19",
                    "children": [
                        {
                            "id": "13",
                            "children": [
                                {
                                    "id": "11",
                                    "children": [],
                                    "active": false,
                                    "link": "page_11"
                                },
                                {
                                    "id": "12",
                                    "children": [],
                                    "active": false,
                                    "link": "page_12"
                                },
                                {
                                    "id": "14",
                                    "children": [
                                        {
                                            "id": "15",
                                            "children": [],
                                            "active": false,
                                            "link": "page_15"
                                        },
                                        {
                                            "id": "16",
                                            "children": [],
                                            "active": false,
                                            "link": "page_16"
                                        },
                                        {
                                            "id": "17",
                                            "children": [],
                                            "active": false,
                                            "link": "page_17"
                                        },
                                        {
                                            "id": "18",
                                            "children": [],
                                            "active": false,
                                            "link": "page_18"
                                        },
                                        {
                                            "id": "20",
                                            "children": [],
                                            "active": false,
                                            "link": "page_20"
                                        },
                                        {
                                            "id": "21",
                                            "children": [],
                                            "active": false,
                                            "link": "page_21"
                                        },
                                        {
                                            "id": "22",
                                            "children": [],
                                            "active": false,
                                            "link": "page_22"
                                        },
                                        {
                                            "id": "23",
                                            "children": [],
                                            "active": false,
                                            "link": "page_23"
                                        }
                                    ],
                                    "active": false,
                                    "link": "page_14"
                                }
                            ],
                            "active": false,
                            "link": "page_13"
                        },
                        {
                            "id": "24",
                            "children": [],
                            "active": false,
                            "link": "page_24"
                        },
                        {
                            "id": "25",
                            "children": [],
                            "active": false,
                            "link": "page_25"
                        },
                        {
                            "id": "28",
                            "children": [],
                            "active": false,
                            "link": "page_28"
                        }
                    ],
                    "active": false,
                    "link": "page_19"
                },
                {
                    "id": "26",
                    "children": [],
                    "active": false,
                    "link": "page_26"
                },
                {
                    "id": "27",
                    "children": [],
                    "active": false,
                    "link": "page_27"
                },
                {
                    "id": "29",
                    "children": [],
                    "active": false,
                    "link": "page_29"
                },
                {
                    "id": "30",
                    "children": [],
                    "active": false,
                    "link": "page_30"
                },
                {
                    "id": "31",
                    "children": [],
                    "active": false,
                    "link": "page_31"
                },
                {
                    "id": "32",
                    "children": [],
                    "active": false,
                    "link": "page_32"
                },
                {
                    "id": "33",
                    "children": [],
                    "active": false,
                    "link": "page_33"
                },
                {
                    "id": "34",
                    "children": [],
                    "active": false,
                    "link": "page_34"
                },
                {
                    "id": "35",
                    "children": [],
                    "active": false,
                    "link": "page_35"
                },
                {
                    "id": "36",
                    "children": [],
                    "active": false,
                    "link": "page_36"
                },
                {
                    "id": "37",
                    "children": [],
                    "active": false,
                    "link": "page_37"
                }
            ],
            "active": false,
            "link": "page_10"
        },
        {
            "id": "8",
            "children": [],
            "active": false,
            "link": "page_8"
        },
        {
            "id": "1",
            "children": [],
            "active": false,
            "link": "page_1"
        },
        {
            "id": "3",
            "children": [
                {
                    "id": "2",
                    "children": [],
                    "active": false,
                    "link": "page_2"
                },
                {
                    "id": "5",
                    "children": [
                        {
                            "id": "4",
                            "children": [],
                            "active": false,
                            "link": "page_4"
                        }
                    ],
                    "active": false,
                    "link": "page_5"
                }
            ],
            "active": false,
            "link": "page_3"
        }
    ]
}

let fitem = setActive("page_17", tree)
document.write(JSON.stringify(tree, null, '  '))
</script>	
</pre>

Последний раз редактировалось voraa, 11.12.2020 в 09:48.
Ответить с цитированием
  #8 (permalink)  
Старый 11.12.2020, 09:55
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Сообщение от voraa Посмотреть сообщение
Если слегка изменить условия
- Функция возвращает найденный item (source по нему всегда взять можно)

- Дерево оформлено с корневым узлом

- Функция очищает все остальные active

То получается совсем простая функция

........
И Вам спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Акардион меню из чекбоксов и списка, как сделать подсветку текущего элемента OliLoi jQuery 0 08.11.2016 08:15
Как поменять класс элемента если он покидает видимую область стр mitrich38 Events/DOM/Window 11 02.07.2016 13:38
как огранчить участок мувабл элемента Tecvid Events/DOM/Window 2 29.08.2015 00:18
не знаю как построить график Женя150 Общие вопросы Javascript 0 22.10.2012 17:09
Как привязаться к порядковому номеру элемента? Dudo4nick jQuery 6 08.02.2012 05:39