Форум

Duda.Ml1986@gmail.com · #1 (**permalink**) 23.03.2014, 20:54

Есть такой вот код:

var firstText = $('#nav > li ').has('ul').find('a').html();
$('#nav > li ').has('ul').find('a').html('+ ' + firstText);

Меню структурой:

<ul id='nav'>
  <li><a>link</a>
       <ul class='sub'>
            <li><a>link</a>
                 <ul class='subsub'>
                    <li><a>link</a></li>
                    <li></li>
                    <li></li>
                    <li></li>
                 </ul>
            </li>
            <li><a>link</a></li>
       </ul>  
  </li>
  <li><a>link</a></li>
  <ul>

Нахожу список по Id и проверяю есть ли у его пунктов вложенные потомки списки, если да то в выбраном пункте нахожу а и в него пихаю +, но почему то этот код пробегает по всему меню и получается:
1. Главная/ + Блог / Контакты
2. + Блог / + Блог / +Блог
3. + Блог / + Блог / +Блог

Возможно я не так понимаю?

рони · #2 (**permalink**) 23.03.2014, 21:09

Duda.Ml1986@gmail.com,
$('#nav > li ').has('ul').find('a').html(любое содержимое) -- находит и меняет все ссылки в элементе li
$('#nav > li ').has('ul').find('a').html(); находит содержимое только первой ссылки

Vlasenko Fedor · #3 (**permalink**) 23.03.2014, 21:34

jQuery(function () {
        $('#nav>li').has('ul').find('>a').each(function(i, el){
         $(el).html('+ ' + $(el).html());
        });
      });

или

jQuery(function () {
        $('#nav>li').has('ul').find('>a').each(function(){
         $(this).html('+ ' + $(this).html());
        });
      });

а так с подпунктами

jQuery(function () {
        $('#nav li').has('ul').find('>a').each(function(){
         $(this).html('+ ' + $(this).html());
        });
      });

рони · #4 (**permalink**) 23.03.2014, 22:40

Duda.Ml1986@gmail.com,
вариант

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
   li  > ul {
    display: none;
  }
  li{
     list-style-type: none;
     width: 100px;
  }
  a.plus, a.minus{
     cursor: pointer;
  }
  a::before {
     content: "▪ ";
     margin-left: +2px;

    }
  .plus::before {
     content: "+ ";
     margin-left: 0px;
    }
  .minus::before {
     content: "- ";
     margin-left: 0px;
   }
  </style>
</head>

<body>
<ul id='nav'>
  <li><a>link</a>
       <ul class='sub'>
            <li><a>link</a>
                 <ul class='subsub'>
                    <li><a>link</a></li>
                    <li></li>
                    <li></li>
                    <li></li>
                 </ul>
            </li>
            <li><a>link</a></li>
       </ul>
  </li>
  <li><a>link</a></li>
  </ul>
  <script>
$(function () {
      $('a:has(+ul)').click(function (e) {
          $(this).toggleClass('plus minus')
          e.preventDefault();
          e.stopPropagation();
          $('+ul', this).slideToggle();
      }).addClass('plus');
  })
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript