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> |
Aetae,
:) |
Цитата:
я про эти методы (next/prevUntil) вообще никогда не слышал) спасибо большое! :dance: |
<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> |
<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> Первое нажатие выделяет, второе - снимает выделение. |
Белый шум
.each(function(){$(this).data('select', 'yes');});== .data('select', 'yes') JQuery всегда работает с массивами. |
<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 копеек %) |
Цитата:
|
Часовой пояс GMT +3, время: 19:51. |