Форум

ivanweb · #1 (**permalink**) 15.06.2009, 11:39

Здравствуйте. Подскажите пожалуйста, как написать скрипт (jquey), который из кода

<ul>
<li><a href="#">text1</a>
<ul>
<li><a href="#">ssss</a></li>
<li><a href="#">ssss</a>
</ul></li>
<li><a href="#">text1</a>
<ul></li>
<li><a href="#">ssss</a></li>
<li><a href="#">ssss</a></li>
</ul></li>
<li><a href="#">text1</a></li>
<li><a href="#">text1</a></li>
</ul>

получить

<ul>
<li>text1
<ul>
<li><a href="#">ssss</a></li>
<li><a href="#">ssss</a></li>
</ul></li>
<li>text1
<ul>
<li><a href="#">ssss</a></li>
<li><a href="#">ssss</a></li>
</ul></li>
<li><a href="#">text1</a></li>
<li><a href="#">text1</a></li>
</ul>

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

Tim · #2 (**permalink**) 15.06.2009, 13:37

В jquey я ламер, но могу предложить решение на PHP:

Берём код

<ul>
	<li><a href='#'>MENY-1</a>
		<ul>
			<li><a href="#">ssss</a></li>
			<li><a href="#">ssss</a></li>
		</ul>
	</li>
	<li><a href="#">MENY-2</a>
		<ul>
			<li><a href="#">ssss</a></li>
			<li><a href="#">ssss</a></li>
		</ul>
	</li>
	<li><a href="#">MENY-3</a></li>
	<li><a href="#">MENY-4</a></li>
</ul>

Немного PHP:

// Чтобы сильно не усложнять основное регулярное выражение удаляем
// все переходы на новую строку, возвраты каретки и табуляции
$txt = preg_replace("/[\t\r\n]/", "", $txt);

// Замена всех одинарных кавычек на двойные (опять таки для упрошения основного RegEx-выражения)
// если Вы гарантируете, что значение атрибута Href ограничено только двойными кавычками, то это
// действие можно пропустить
$txt = preg_replace("/(<[^>]*)'([^']*)'([^>]*>)/", '$1"$2"$3', $txt);

// Собственно удаление не нужных ссылок
$txt = preg_replace("/<li><a href=\"[^\"]\">([^<]*)<\\/a><ul>/i", "<li>$1<ul>", $txt);

print $txt;

Вот результата

<ul>
	<li>MENY-1
		<ul>
			<li><a href="#">ssss</a></li>
			<li><a href="#">ssss</a></li>
		</ul>
	</li>
	<li>MENY-2
		<ul>
			<li><a href="#">ssss</a></li>
			<li><a href="#">ssss</a></li>
		</ul>
	</li>
	<li><a href="#">MENY-3</a></li>
	<li><a href="#">MENY-4</a></li>
</ul>

P.S.: Данные регулярные выражения не претендуют на звание идеальных, но у меня багов не было.

e1f · #3 (**permalink**) 15.06.2009, 15:04

2Tim: Так ТС надо же на клиенте. Можно примерно так (на коленке, так что не претендую на оптимальность):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.2.6.js" ></script>
<script type="text/javascript">
<!--
function filterList() {
    $('#start').find('li:has(>ul)').find('>a').each(function(){
        $(this).replaceWith($(this).text())
    });
    return false
}
//-->
</script>
</head>
<body>
<ul id="start">
  <li>
    <a href="#">text1</a>
    <div>
    <ul>
      <li><a href="#">subtext3</a></li>
      <li><a href="#">subtext4</a></li>
    </ul>
    </div>
  </li>
  <li>
    <a href="#">text2</a>
    <ul>
      <li><a href="#">subtext3</a></li>
      <li><a href="#">subtext4</a></li>
    </ul>
  </li>
  <li><a href="#">text3</a></li>
  <li><a href="#">text4</a></li>
</ul>
<button onclick="filterList()">Filter</button>
</body>
</html>

Tim · #4 (**permalink**) 15.06.2009, 16:24

Да я понял. Регулярные выражения можно ведь и в JS использовать, чут поправить только. Я в JS просто не очень понимаю. Если ivanweb jQuery только для этого использует, возможно есть смысл с рег. выражениями поизощряться.

Kolyaj · #5 (**permalink**) 15.06.2009, 16:28

Tim,
парсить innerHTML регулярками не стоит. Нервы дороже

e1f · #6 (**permalink**) 15.06.2009, 17:48

2Kolyaj, +1

2Tim, можно сделать все это и без jQuery. по-хорошему, даже нужно

Tim · #7 (**permalink**) 15.06.2009, 20:13

Цитата:

можно сделать все это и без jQuery. по-хорошему

Поделитесь идеей?

Kolyaj про нервы метко подмечено, я всё время волнуюсь как бы они чего лишнего не оттяпали.

ivanweb · #8 (**permalink**) 15.06.2009, 21:53

js скрипт конечно вариант, просто больше практики на jquery у меня

x-yuri · #9 (**permalink**) 16.06.2009, 00:43

Цитата:

Так ТС надо же на клиенте

ТСы не всегда знают, что им нужно

Я, например, сначала решил, что оно приходит каким-нибудь ajax'ом и, возможно, на сервере бы было проще/лучше решить эту проблему

e1f · #10 (**permalink**) 16.06.2009, 01:12

Хм... у меня про сервер мыслей не возникло, хотя вариант

2Tim, почему бы и не поделиться?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.2.6.js" ></script>
<script type="text/javascript">
<!--
function filterList() {
    var context = document.getElementById('start');
    var lis = context.getElementsByTagName('LI');
    for (var i=0, l=lis&&lis.length; i<l; i++) {
        var chldLi = lis[i].firstChild;
        var a2del = [];
        var need_clean = false;
        while (chldLi) {
            if (chldLi.nodeName=='UL') need_clean = true;
            else if (chldLi.nodeName=='A') a2del.push(chldLi);
            chldLi = chldLi.nextSibling;
        }
        if (need_clean) {
            for (var j=0, m=a2del.length; j<m; j++) {
                lis[i].insertBefore(document.createTextNode(a2del[j].innerHTML), a2del[j]);
                lis[i].removeChild(a2del[j])
            }
        }
    }
    return false
}
//-->
</script>
</head>
<body>
<ul id="start">
  <li>
    <a href="#">text1</a>
    <div>
    <ul>
      <li><a href="#">subtext3</a></li>
      <li><a href="#">subtext4</a></li>
    </ul>
    </div>
  </li>
  <li>
    <a href="#">text2</a>
    <ul>
      <li><a href="#">subtext3</a></li>
      <li><a href="#">subtext4</a></li>
    </ul>
  </li>
  <li><a href="#">text3</a></li>
  <li><a href="#">text4</a></li>
</ul>
<button onclick="filterList()">Filter</button>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript