Форум

рони · #11 (**permalink**) 31.07.2018, 15:27

kvizor34,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  li{
      width: 100px;
      height: 20px;
      border: 1px dashed Gray;
      padding: 5px;
  }
  .red{
      background-color: Red;
  }

  </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
      $(function() {
    $("ul").on("click", "li", addCls);
    function addCls()
    {
       var el = $(this), cls = ":not(." + this.className +")";
       el.nextUntil(cls).add(el.prevUntil(cls)).addClass("red")
    }


     })
   </script>
</head>

<body>
<ul>
    <li class="slonik"></li>
    <li class="begemotik"></li>
    <li class="begemotik"></li>
    <li class="begemotik"></li>
    <li class="slonik"></li>
    <li class="slonik"></li>
    <li class="slonik"></li>
    <li class="begemotik"></li>
    <li class="begemotik"></li>
</ul>

</body>

</html>

рони · #12 (**permalink**) 31.07.2018, 15:28

Aetae,

kvizor34 · #13 (**permalink**) 31.07.2018, 15:35

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

Кажется я понял (но не уверен

):

<ul>
    <li class="slonik">1</li>
    <li class="begemotik">2</li>
    <li class="begemotik">3</li>
    <li class="begemotik">4</li>
    <li class="slonik">5</li>
    <li class="slonik">6</li>
    <li class="slonik">7</li>
    <li class="begemotik">8</li>
    <li class="begemotik">9</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$('li').click(function(){
  $('li').css( "color", "black" );
  var $this = $(this);
  var cls = $this.attr('class');
  $this.nextUntil(':not(.' + cls + ')').css( "color", "red" );
  $this.prevUntil(':not(.' + cls + ')').css( "color", "red" );
});
</script>

Совершенно верно!

я про эти методы (next/prevUntil) вообще никогда не слышал) спасибо большое!

j0hnik · #14 (**permalink**) 31.07.2018, 15:48

<ul>
    <li class="slonik">1</li>
    <li class="begemotik">2</li>
    <li class="begemotik">3</li>
    <li class="begemotik">4</li>
    <li class="slonik">5</li>
    <li class="slonik">6</li>
    <li class="slonik">7</li>
    <li class="begemotik">8</li>
    <li class="begemotik">9</li>
</ul>

<script>
var li = document.querySelectorAll('li');
li.forEach(el=>el.onclick=e=>{
	var cls = el.className, th = el;
while (el = el.previousElementSibling) {
	if (el.className !== cls) break;
	else  el.style.color = 'red';
}
while (th = th.nextElementSibling) {
	if (th.className !== cls) break;
	else  th.style.color = 'red';
}
});
</script>

Белый шум · #15 (**permalink**) 31.07.2018, 16:04

<ul>
    <li class="slonik">1</li>
    <li class="begemotik">2</li>
    <li class="begemotik">3</li>
    <li class="begemotik">4</li>
    <li class="slonik">5</li>
    <li class="slonik">6</li>
    <li class="slonik">7</li>
    <li class="begemotik">8</li>
    <li class="begemotik">9</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('ul').on('click', 'li', function(){
  $this = $(this);
  var cls = $this.attr('class');
  if($this.data('select')=='yes'){
    $this.css('color','').data('select', '');
    $this.nextUntil(':not(.'+cls+')').css('color','').each(function(){$(this).data('select', '');});
    $this.prevUntil(':not(.'+cls+')').css('color','').each(function(){$(this).data('select', '');});
  } else {
    $this.data('select', 'yes');
    $this.nextUntil(':not(.'+cls+')').css('color','red').each(function(){$(this).data('select', 'yes');});
    $this.prevUntil(':not(.'+cls+')').css('color','red').each(function(){$(this).data('select', 'yes');});
  }
});
</script>

Первое нажатие выделяет, второе - снимает выделение.

Aetae · #16 (**permalink**) 31.07.2018, 17:32

Белый шум

.each(function(){$(this).data('select', 'yes');});

==

.data('select', 'yes')

JQuery всегда работает с массивами.

SuperZen · #17 (**permalink**) 31.07.2018, 20:53

<ul>
  <li class="slonik">slonik 1</li>
  <li class="begemotik">begemotik 2</li>
  <li class="begemotik">begemotik 3</li>
  <li class="begemotik">begemotik 4</li>
  <li class="slonik">slonik 5</li>
  <li class="slonik">slonik 6</li>
  <li class="slonik">slonik 7</li>
  <li class="begemotik">begemotik 8</li>
  <li class="begemotik">begemotik 9</li>
</ul>

<script type="text/javascript">
  document.querySelector('ul').addEventListener('click', this)
  handleEvent = (e) => {
    var sibling = e.target
    while (true) {
      if (!sibling.previousElementSibling || !sibling.previousElementSibling.classList.contains(e.target.className)) break
      sibling = sibling.previousElementSibling
    }
    while (sibling) {
      if (!sibling.classList.contains(e.target.className)) break
      else sibling.style.color = 'red'
      sibling = sibling.nextElementSibling
    }
  }
</script>

мои 5 копеек %)

Белый шум · #18 (**permalink**) 01.08.2018, 00:54

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

JQuery всегда работает с массивами.

Да, перемудрил

Форум

Справочник

Discord чат

Курсы javascript