Форум

aleksandr8i · #1 (**permalink**) 12.03.2015, 20:37

Доброго времени суток.

Есть вот такое, примерное, дерево элементов

<ul>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
</ul>

and style

li{float:left;}

есть js

$(document).ready(function(){
    $(".bg_link").hover(function(){
        $( this ).addClass("active");
        },function(){
        $( this ).removeClass("active");
    });
});

Как видно из выше приведенного кода все ссылки расположены горизонтально.
У меня вопрос следующий: Как можно присвоить элементам li тем которые ближе к левому части экрана расположены один class, а к тем элементам li которые расположены правее другой class?

Буду благодарен любой помощи.

рони · #2 (**permalink**) 12.03.2015, 20:45

aleksandr8i,
а который по середине тому какой класс?

aleksandr8i · #3 (**permalink**) 12.03.2015, 20:47

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

aleksandr8i,
а который по середине тому какой класс?

любой из двух.

рони · #4 (**permalink**) 12.03.2015, 20:53

aleksandr8i,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  ul{
    margin:0 auto;
    width:350px;
  }

  li{
    float:left;
    width:50px;
    list-style:none;
  }

  li:hover{
    background:#00FF00;
  }

  li:nth-child(n +5):hover{
    background:#FF3333;
  }
  </style>
</head>

<body>  <ul>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
</ul>



</body>

</html>

aleksandr8i · #5 (**permalink**) 12.03.2015, 21:22

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

aleksandr8i,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  ul{
    margin:0 auto;
    width:350px;
  }

  li{
    float:left;
    width:50px;
    list-style:none;
  }

  li:hover{
    background:#00FF00;
  }

  li:nth-child(n +5):hover{
    background:#FF3333;
  }
  </style>
</head>

<body>  <ul>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
</ul>



</body>

</html>

Спасибо. Ваш пример был полезен, понял что нужно использовать nth-child в js буду искать примеры js кода, где используется nth-child.
Но буду так же благодарен, если кто-то здесь приведет пример

рони · #6 (**permalink**) 12.03.2015, 21:30

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

нужно использовать nth-child

взять индекс нажатого элемента и сравнить с половиной длины всех элементов

рони · #7 (**permalink**) 12.03.2015, 21:40

aleksandr8i,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  ul{
    margin:0 auto;
    width:350px;
  }

  li{
    float:left;
    width:50px;
    list-style:none;
  }

  .active{
    background:#00FF00;
  }

  .super{
    background:#FF3333;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var li = $(".bg_link"), middle= li.length/2;
      li.hover(function(){
        var i = li.index(this);
        $( this ).addClass(i < middle? "active" : "super");
        },function(){
        $( this ).removeClass("active super");
    });
});
  </script>
</head>

<body>  <ul>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
</ul>



</body>

</html>

danik.js · #8 (**permalink**) 12.03.2015, 21:48

рони, ты ли это? Непривычно как-то без a b c

К слову, len все же не совсем подходит. Лучше half, middle, center.

рони · #9 (**permalink**) 12.03.2015, 22:06

danik.js,
ok -- лучше названия подсказывай чем матерится

aleksandr8i · #10 (**permalink**) 12.03.2015, 22:44

рони, спасибо еще раз, это как раз то что мне нужно было.
Но я упустил важный момент, при описании задачи в первом сообщении.
Элементов li достаточно много поэтому они все не помещаются в одну линию горизонта и переходят во второй ряд, образуя 3 ряд и т.д

Вот проблема которую наблюдаю:
При наведении курсора на элементы li 1-го ряда присвоен class="active"
у 2-го ряда элементов на половину class="active" и class="super"
у 3-го ряда элементов class="super"

Форум

Справочник

Discord чат

Курсы javascript