Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2015, 18:39
Интересующийся
Отправить личное сообщение для newbie guy Посмотреть профиль Найти все сообщения от newbie guy
 
Регистрация: 30.10.2015
Сообщений: 12

Последний элемент
Привет всем!

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

<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

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

Заранее спасибо за ответы.
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2015, 19:51
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

newbie guy,
Сообщение от newbie guy
Каждый последний элемент списка, должен быть подчеркнут.
уточните ,пожалуйста , списка целого или подпункта или пункта?
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2015, 20:03
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115

Сообщение от Mess4me
(!item.getElementsByTagName('li').
не li а ul
Сообщение от newbie guy
Каждый элемент списка не имеющий вложений,
P.S. хотя можно и так

Последний раз редактировалось рони, 15.11.2015 в 20:12.
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2015, 21:12
Интересующийся
Отправить личное сообщение для newbie guy Посмотреть профиль Найти все сообщения от newbie guy
 
Регистрация: 30.10.2015
Сообщений: 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 // нет вложений и нижний

Последний раз редактировалось newbie guy, 15.11.2015 в 21:22.
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2015, 21:28
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115

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>
Ответить с цитированием
  #8 (permalink)  
Старый 15.11.2015, 21:54
Интересующийся
Отправить личное сообщение для newbie guy Посмотреть профиль Найти все сообщения от newbie guy
 
Регистрация: 30.10.2015
Сообщений: 12

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115

newbie guy,
нет чёткого определения элементов для которых нужно применить css, несмотря на ваши примеры и обьяснения.
добавить нечего.
Ответить с цитированием
  #10 (permalink)  
Старый 15.11.2015, 22:05
Интересующийся
Отправить личное сообщение для newbie guy Посмотреть профиль Найти все сообщения от newbie guy
 
Регистрация: 30.10.2015
Сообщений: 12

рони, 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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Свой стиль на последний элемент Quark_ Javascript под браузер 4 21.09.2015 13:23
Проблема с наполнением массива объектов - последний элемент заменяет собой все... Джангар AJAX и COMET 5 18.12.2014 22:54
скрыть последний элемент adik7960 Общие вопросы Javascript 5 02.01.2013 21:43
Выбрать элемент у родителя которого сын это элемент по которому кликнули MalikSPB Events/DOM/Window 8 30.12.2012 11:22
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 19:10