Скрыть li если отображается меньше 2 в ul

Question

Подскажите как скрыть li элементы внутри ul если отображается меньше двух элементов Например скрыть li, если отображается вот так

<ul> 
<li>text</li>
</ul>

Answer 1

if ($('ul li').length < 2) { 
  $('ul li').hide();
}

ul {
  border: 1px solid blue;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul> 
<li>text</li>
</ul>

Answer 2

Можно проще... Если именно скрыть

ul:not(:nth-child(2)){
  display: none;
}

<ul>
  <li>text1</li>
</ul>

<ul>
  <li>text2</li>
  <li>text2</li>
</ul>

Но я бы рекомендовал. Не выводить, на стороне сервера, если в цикле менше 1-го элемента это будет более правильнее.

Answer 3

Вставлю и я свои "три копейки"...
На мой взгляд, решение BlackStar1991 хоть и работает, но имеет один серьёзный недостаток - CSS стиль придётся повторить для 3х, 4х и более элементов примерно так:

ul:not(:nth-child(2)),
ul:not(:nth-child(3)),
ul:not(:nth-child(4)), ... {
  display: none;
}

Решение Алексея лишено такого недостатка, но требует использование JavaScript.

Предлагаю использовать только CSS так:

ul li:only-child {
    display: none;
}

<ul>
  <li>text 1.1</li>
</ul>

<ul>
  <li>text 2.1</li>
  <li>text 2.2</li>
</ul>

<ul>
  <li>text 3.1</li>
  <li>text 3.2</li>
  <li>text 3.3</li>
</ul>

<ul>
  <li>text 4.1</li>
  <li>text 4.2</li>
  <li>text 4.3</li>
  <li>text 4.4</li>
</ul>

БЛОГ НА HUSL

Скрыть li если отображается меньше 2 в ul

Ответы (3 шт):