Javascript-форум - Проблема в работе с тегами html

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Проблема в работе с тегами html (https://javascript.ru/forum/misc/17175-problema-v-rabote-s-tegami-html.html)

Проблема в работе с тегами html

Как выбрать только те теги, которые не стоят в другом.

К примеру мне нужно в двухуровневом списке выбрать только заголовки (внешний список).

<li>Level 1 list element</li>
<ul>
<li>list element</li>
<li>Level 2 list element</li>
<li>list element</li>
<li>Level 2 list element</li>
<li>Level 2 list element</li>
</ul>
<li>Level 1 list element</li>
<ul>
<li>list element</li>
<li>Level 2 list element</li>
<li>list element</li>
<li>Level 2 list element</li>
<li>Level 2 list element</li>
</ul>
<li>Level 1 list element</li>
<ul>
<li>list element</li>
<li>Level 2 list element</li>
<li>list element</li>
<li>Level 2 list element</li>
<li>Level 2 list element</li>
</ul>

То есть выбрать те LI которые не стоят в UL

var lis = document.getElementsByTagName("li");
var outLis = [];
for (var i = 0; i < lis.length; i++) {
    if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li") outLis.push(lis[i]);
}
// далее работаем с outLis

Цитата:

Сообщение от Amphiluke (Сообщение 103909)

var lis = document.getElementsByTagName("li");
var outLis = [];
for (var i = 0; i < lis.length; i++) {
    if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li") outLis.push(lis[i]);
}
// далее работаем с outLis

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

А как селать массив ЗАНЧЕНИЙ того, что стоит между найденными тегами.

Куда уж универсальнее? :-? Можно, конечно, сделать более функционально, например, написать ф-цию, которой можно передавать id контейнера, содержащего вложенные списки. Типа

function(_cont) {
    var cont = document.getElementById(_cont) || document;
    var lis = cont.getElementsByTagName("li");
    // ...
}

Вообще, если хотите большой универсальности, пользуйтесь библиотеками типа jQuery.

Цитата:

Сообщение от zeraid

А как селать массив ЗАНЧЕНИЙ того, что стоит между найденными тегами.

Для вышеприведенного примера можно изменить так:

if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li") outLis.push(lis[i].innerHTML);

Цитата:

Сообщение от Amphiluke (Сообщение 103930)

function(_cont) {
    var cont = document.getElementById(_cont) || document;
    var lis = cont.getElementsByTagName("li");
    // ...
}

Вообще, если хотите большой универсальности, пользуйтесь библиотеками типа jQuery.

Для вышеприведенного примера можно изменить так:

if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li") outLis.push(lis[i].innerHTML);

Спасибо большое.

И последний вопрос. Мне нужно в HTML документе все двухуровневые списки ПРЕОБРАЗОВАТЬ в таблицу (ну табилцу я знаю как сделать). НО как УДАЛИТЬ список и вместо него поставить таблицу в ЛЮБОМ HTML документе где есть двухуровневый список соответственно.

Методов DOM для удаления/замены/добавления элементов для этого достаточно.

И судя по вашему примеру он всеравно все выводит.... ПОлынй код в теге body таков.

<body>
<form style="width:800px; ">
<img src="img/mod.jpg" height="38px" width="129px" onClick="Mod()" onmouseover="this.style.opacity=0.4;"
onmouseout="this.style.opacity=1;">
</form>


<li>Level 1 list element</li>
<ul>
<li>list element</li>
<li>Level 2 list element</li>
<li>list element</li>
<li>Level 2 list element</li>
<li>Level 2 list element</li>
</ul>
<li>Level 1 list element</li>
<ul>
<li>list element</li>
<li>Level 2 list element</li>
<li>list element</li>
<li>Level 2 list element</li>
<li>Level 2 list element</li>
</ul>
<li>Level 1 list element</li>
<ul>
<li>list element</li>
<li>Level 2 list element</li>
<li>list element</li>
<li>Level 2 list element</li>
<li>Level 2 list element</li>
</ul>


</body>

И вот видимо в массив outList он помещает вообще все названия. А не только 3 заголовка.

Цитата:

Сообщение от Amphiluke (Сообщение 103932)

Методов DOM для удаления/замены/добавления элементов для этого достаточно.

спасибо за ссылки. А то данный сайт очень не удобно по структуре сделан.

А где в вашем примере вложенные списки? :D

Цитата:

Сообщение от Amphiluke (Сообщение 103935)

А где в вашем примере вложенные списки? :D

Ну описался. двухуровневые имел в виду как и в 1 сообщении.

Вы понимаете, что ваш код невалиден с точки зрения (X)HTML? Оформите код разметки правильно, и всё будет работать.

<ul>
<li><span>Level 1 list element</span>
<ul>
	<li>list element</li>
	<li>Level 2 list element</li>
	<li>list element</li>
	<li>Level 2 list element</li>
	<li>Level 2 list element</li>
</ul>
</li>
<li><span>Level 1 list element</span>
<ul>
	<li>list element</li>
	<li>Level 2 list element</li>
	<li>list element</li>
	<li>Level 2 list element</li>
	<li>Level 2 list element</li>
</ul>
</li>
<li><span>Level 1 list element</span>
<ul>
	<li>list element</li>
	<li>Level 2 list element</li>
	<li>list element</li>
	<li>Level 2 list element</li>
	<li>Level 2 list element</li>
</ul>
</li>
<ul>

<script type="text/javascript">
var lis = document.getElementsByTagName("li");
var outLis = [];
for (var i = 0; i < lis.length; i++) {
    if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li")
        outLis.push(lis[i].getElementsByTagName("span")[0].innerHTML);
}
alert(outLis);

</script>

Я же говорю чтов качестве html страницы может быть все что угодно. И списков может быть несколько.

Хотя я вас понимаю. Это таблицу со столбаци и строками к примеру по другому никак не напишешь. А у подобного рода списков вариантов написания несоклько в плане структуры.

То-есть к примеру можно обрамлять все ul'ом - можно нет и тп.

Так что пожалуй вы правы.

Весь день сижу. никак не поулчается.

В общем полная задача у меня такая:

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

Вот Заголовки помещать в левый столбец у меня поулчилось. А вот как выбирать LI для данного UL я не пойму.

Сейчас у меня он все LI выводит в самый них второго столбца.....

вот он код весь.

function Mod(){

var new_table = document.createElement('table');
	new_table.style.background = '#fff';
    new_table.style.color = '#000';
    new_table.border = '1';
    new_table.cellSpacing = '0';
var new_table1 = document.createElement('table');
	new_table1.style.background = '#fff';
    new_table1.style.color = '#000';
    new_table1.border = '1';
    new_table1.cellSpacing = '0';
var new_div = document.createElement('div');
    new_div.style.float = 'left';
    new_div.style.margin = '10px';
var parent = document.getElementsByTagName('body')[0];

//массив UL (количество строк в левом столбце)
var mas_table = document.getElementsByTagName('ul');

//выбираем только заголовки (составляем массив outLis из заголовков)
var lis = document.getElementsByTagName("li");
var outLis = [];
for (var i = 0; i < lis.length; i++) {
    if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li")
        outLis.push(lis[i].getElementsByTagName("span")[0].innerHTML);
}

//рисуем левый столбец
for(var i = 0; i < mas_table.length-1;i++)
{
 var new_tr =  document.createElement('tr');
 var new_td =  document.createElement('td');
 var textNode = document.createTextNode(outLis[i]);
 new_td.appendChild(textNode);
 new_tr.appendChild(new_td);
 new_table.appendChild(new_tr);
}

//рисуем ТАБЛИЦУ внутри правого столбца. (все LI в одном UL)
for(var k = 0 ;k< 5;k++)
{
 var new_td1 =  document.createElement('td');
 var new_tr1 =  document.createElement('tr');
 var li2 = document.getElementsByTagName('li')[k+1].innerHTML;
 var textNode1 = document.createTextNode(li2);
 new_td1.appendChild(textNode1);
 new_tr1.appendChild(new_td1);
 new_table1.appendChild(new_tr1);
 new_tr.appendChild(new_table1);
}

new_table.appendChild(new_tr);
new_div.appendChild(new_table);
parent.appendChild(new_div);
}

ну и вот html который в body

<ul>
<li><span>Level 1 list element</span>
<ul>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>
</li>
<li><span>Level 2 list element</span>
<ul>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>
</li>
<li><span>Level 3 list element</span>
<ul>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
</ul>
</li>
</ul>

С вашим кодом разбираться лень… :)
Я сделал бы так примерно:

function Mod2() {
    var lis = document.getElementsByTagName("li");
    var outLis = [];
    for (var i = 0; i < lis.length; i++) {
        if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li") {
            outLis.push(lis[i]);
        }
    }
    var tbl = document.createElement("table"), tr, td, inUl, inLis;
    for (var j = 0; j < outLis.length; j++) {
        inUl = outLis[j].getElementsByTagName("ul")[0];
        inLis = (inUl) ? inUl.getElementsByTagName("li") : [];
        tr = tbl.insertRow(-1);
        td = tr.insertCell(-1);
        td.rowSpan = (inLis != false) ? inLis.length : 1;
        td.innerHTML = outLis[j].getElementsByTagName("span")[0].innerHTML;
        td = tr.insertCell(-1);
        td.innerHTML = (inLis != false) ? inLis[0].innerHTML : "";
        for (var k = 1; k < inLis.length; k++) {
            tr = tbl.insertRow(-1);
            td = tr.insertCell(-1);
            td.innerHTML = inLis[k].innerHTML;
        }
    }
    tbl.setAttribute("rules", "all");
    tbl.style.border = "1px solid #000";
    document.body.appendChild(tbl);
    return false;
}

Использование:

<ul>
<li><span>Level 1 list element</span>
<ul>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>
</li>
<li><span>Level 2 list element</span>
<ul>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>
</li>
<li><span>Level 3 list element</span>
<ul>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
</ul>
</li>
</ul>
<p><a href="#" onclick="return Mod2();">Create Table!</a></p>

Цитата:

Сообщение от Amphiluke (Сообщение 103988)

С вашим кодом разбираться лень… :)
Я сделал бы так примерно:

function Mod2() {
    var lis = document.getElementsByTagName("li");
    var outLis = [];
    for (var i = 0; i < lis.length; i++) {
        if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li") {
            outLis.push(lis[i]);
        }
    }
    var tbl = document.createElement("table"), tr, td, inUl, inLis;
    for (var j = 0; j < outLis.length; j++) {
        inUl = outLis[j].getElementsByTagName("ul")[0];
        inLis = (inUl) ? inUl.getElementsByTagName("li") : [];
        tr = tbl.insertRow(-1);
        td = tr.insertCell(-1);
        td.rowSpan = (inLis != false) ? inLis.length : 1;
        td.innerHTML = outLis[j].getElementsByTagName("span")[0].innerHTML;
        td = tr.insertCell(-1);
        td.innerHTML = (inLis != false) ? inLis[0].innerHTML : "";
        for (var k = 1; k < inLis.length; k++) {
            tr = tbl.insertRow(-1);
            td = tr.insertCell(-1);
            td.innerHTML = inLis[k].innerHTML;
        }
    }
    tbl.setAttribute("rules", "all");
    tbl.style.border = "1px solid #000";
    document.body.appendChild(tbl);
    return false;
}

Использование:

<ul>
<li><span>Level 1 list element</span>
<ul>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>
</li>
<li><span>Level 2 list element</span>
<ul>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>
</li>
<li><span>Level 3 list element</span>
<ul>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
</ul>
</li>
</ul>
<p><a href="#" onclick="return Mod2();">Create Table!</a></p>

Спасибо попробую разобрать что вы имели вв иду

ПЫСЫ ну использование тоу меня сделано конечно)) просто сюда не весь же код пихать.

Да спасибо помогло. Просто был удивлен что так коротко написали. Я просто не всеми особенностями синтаксиса владею ибо НОРМАЛЬНОГО материала по скрипту почти нету....