Форум

newbie guy · #1 (**permalink**) 15.11.2015, 18:39

Привет всем!

И так, есть список.

<ul class='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span>Подзаголовок 1.1</span></li>
        </ul>
        <ul class='container'>
            <li><span>Подзаголовок 1.2</span></li>
        </ul>
    </li>
    <li>
        <span>Заголовок 2</span>
        <ul class='container'>
            <li><span>Подзаголовок 2.1</span></li>
        </ul>
    </li>
</ul>

Выглядит так:

Заголовок 1
- Подзаголовок 1.1
- Подзаголовок 1.2
Заголовок 2
- Подзаголовок 2.1

Нужно сделать, чтобы было вот так:

Заголовок 1
- Подзаголовок 1.1
- Подзаголовок 1.2
Заголовок 2
- Подзаголовок 2.1

Если объяснить в словах.
Каждый последний элемент списка, должен быть подчеркнут.
Каждый элемент списка не имеющий вложений, должен быть выделен жирным шрифтом.

Заранее спасибо за ответы.

Mess4me · #2 (**permalink**) 15.11.2015, 19:51

newbie guy,

Сообщение от newbie guy

Каждый последний элемент списка, должен быть подчеркнут.

уточните ,пожалуйста , списка целого или подпункта или пункта?

Mess4me · #3 (**permalink**) 15.11.2015, 20:03

newbie guy,
так ?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <title>Document</title>

    <style>
       #container .container li:last-of-type{text-decoration: underline}

    </style>
</head>
<body>
<ul id='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
        </ul>
        <ul class='container'>
            <li><span>Подзаголовок 1.2</span></li>
            <li><span>Подзаголовок 1.3</span></li>
        </ul>
    </li>
    <li>
        <span>Заголовок 2</span>
        <ul class='container'>
            <li><span>Подзаголовок 2.1</span></li>
        </ul>
    </li>
</ul>
<script>


  $('li').each(function (i, item ) {

      if (!item.getElementsByTagName('li').length) {
          item.style.fontWeight = 'bold'
      }
  });



</script>
</body>
</html>

рони · #4 (**permalink**) 15.11.2015, 20:09

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

(!item.getElementsByTagName('li').

не li а ul

Сообщение от newbie guy

Каждый элемент списка не имеющий вложений,

P.S. хотя можно и так

newbie guy · #5 (**permalink**) 15.11.2015, 21:12

Mess4me,
Лично у меня, ваш вариант выглядит так.

Заголовок 1
- Подзаголовок 1.1
- Подзаголовок 1.1
- Подзаголовок 1.1
- Подзаголовок 1.1
- Подзаголовок 1.2
- Подзаголовок 1.3
Заголовок 2
- Подзаголовок 2.1

Мне же в итоге нужно получить следующее.

Без вложений жирным сделать.
Самые нижние элементы подчеркнуть нужно.

Заголовок 1
- Подзаголовок 1.1
- Подзаголовок 1.1
- Подзаголовок 1.1
- Подзаголовок 1.1
- Подзаголовок 1.2
- Подзаголовок 1.3
Заголовок 2
- Подзаголовок 2.1

Еще пример для наглядности

Заголовок 1
- Подзаголовок 1.1 // нет вложений
- Подзаголовок 1.2
  - Подзаголовок 1.2.1
    - Подзаголовок 1.2.1.1 // нет вложений
- Подзаголовок 1.3 // нет вложений
- Подзаголовок 1.4 // нет вложений
- Подзаголовок 1.5 // нет вложений
- Подзаголовок 1.6
  - Подзаголовок 1.6.1 // нет вложений
Заголовок 2 // нижний
- Подзаголовок 2.1 // нижний
  - Подзаголовок 2.1.1 // нижний
    - Подзаголовок 2.1.1.1 // нижний
      - Подзаголовок 2.1.1.1.1 // нет вложений и нижний

Mess4me · #6 (**permalink**) 15.11.2015, 21:28

newbie guy,

Сообщение от newbie guy

Заголовок 1
Подзаголовок 1.1
Подзаголовок 1.1
Подзаголовок 1.1
Подзаголовок 1.1
Подзаголовок 1.2
Подзаголовок 1.3
Заголовок 2
Подзаголовок 2.1

Еще пример для наглядности
Заголовок 1
Подзаголовок 1.1 // нет вложений
Подзаголовок 1.2
Подзаголовок 1.2.1
Подзаголовок 1.2.1.1 // нет вложений
Подзаголовок 1.3 // нет вложений
Подзаголовок 1.4 // нет вложений
Подзаголовок 1.5 // нет вложений
Подзаголовок 1.6
Подзаголовок 1.6.1 // нет вложений
Заголовок 2 // нижний
Подзаголовок 2.1 // нижний
Подзаголовок 2.1.1 // нижний
Подзаголовок 2.1.1.1 // нижний
Подзаголовок 2.1.1.1.1 // нет вложений и нижний

можете в HTML выложить ?

рони · #7 (**permalink**) 15.11.2015, 21:32

newbie guy,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body > ul > li:last-child{
    text-decoration: underline;
  }

  </style>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

</head>

<body>
<ul class='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span>Подзаголовок 1.1</span></li>
        </ul>
        <ul class='container'>
            <li><span>Подзаголовок 1.2</span></li>
        </ul>
    </li>
    <li>
        <span>Заголовок 2</span>
        <ul class='container'>
            <li><span>Подзаголовок 2.1</span></li>
        </ul>
    </li>
</ul>
<ul id='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
        </ul>
        <ul class='container'>
            <li><span>Подзаголовок 1.2</span></li>
            <li><span>Подзаголовок 1.3</span></li>
        </ul>
    </li>
    <li>
        <span>Заголовок 2</span>
        <ul class='container'>
            <li><span>Подзаголовок 2.1</span></li>
        </ul>
    </li>
</ul>

 <script>
   $('li').each(function (i, item ) {

      if (!item.getElementsByTagName('ul').length) {
          item.querySelector('span').style.fontWeight = 'bold'
      }
  });

 </script>
</body>

</html>

newbie guy · #8 (**permalink**) 15.11.2015, 21:54

Ваш вариант выглядит у меня так.

<ul id='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span>Подзаголовок 1.1</span></li>
            <li><span><ins>Подзаголовок 1.1</ins></span></li> //подчеркнутый
        </ul>
        <ul class='container'>
            <li><span>Подзаголовок 1.2</span></li>
            <li><span><ins>Подзаголовок 1.3</ins></span></li> //подчеркнутый
        </ul>
    </li>
    <li>
        <span>Заголовок 2</span>
        <ul class='container'>
            <li><span><ins>Подзаголовок 2.1</ins></span></li> //подчеркнутый
        </ul>
    </li>
</ul>

Мои примеры.

<ul id='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span><b>Подзаголовок 1.1</b></span></li>
            <li><span><b>Подзаголовок 1.1</b></span></li>
            <li><span><b>Подзаголовок 1.1</b></span></li>
            <li><span><b>Подзаголовок 1.1</b></span></li>
        </ul>
        <ul class='container'>
            <li><span><b>Подзаголовок 1.2</b></span></li>
            <li><span><b>Подзаголовок 1.3</b></span></li>
        </ul>
    </li>
    <li>
        <span><ins>Заголовок 2</ins></span>
        <ul class='container'>
            <li><span><ins><b>Подзаголовок 2.1</ins></b></span></li>
        </ul>
    </li>
</ul>

<ul id='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span><b>Подзаголовок 1.1</b></span></li>
            <li>
            <span>Подзаголовок 1.2</span>
            <ul class='container'>
                <li>
                <span>Подзаголовок 1.2.1</span>
                <ul class='container'>
                    <li>
                    <span><b>Подзаголовок 1.2.1.1</b></span>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><span><b>Подзаголовок 1.3</b></span></li>
            <li><span><b>Подзаголовок 1.4</b></span></li>
            <li><span><b>Подзаголовок 1.5</b></span></li>
            <li>
                <span>Подзаголовок 1.6</span>
                <ul class='container'>
                    <li>
                    <span><b>Подзаголовок 1.6.1</b></span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span><ins>Заголовок 2</ins></span>
        <ul class='container'>
            <li>
                <span><ins>Подзаголовок 2.1</ins></span>
                <ul class='container'>
                    <li>
                    <span><ins>Подзаголовок 2.1.1</ins></span>
                    <ul class='container'>
                        <li>
                            <span><ins>Подзаголовок 2.1.1.1</ins></span>
                            <ul class='container'>
                                <li>
                                    <span><b><ins>Подзаголовок 2.1.1.1.1</ins></b></span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

рони · #9 (**permalink**) 15.11.2015, 21:58

newbie guy,
нет чёткого определения элементов для которых нужно применить css, несмотря на ваши примеры и обьяснения.
добавить нечего.

newbie guy · #10 (**permalink**) 15.11.2015, 22:05

рони, Mess4me,
Спасибо.
То, что нужно.

Теперь лишь понять как это работает.

P.S. У меня не работает <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

А вот так, работает <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Форум

Справочник

Discord чат

Курсы javascript