Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Приём отбора элементов на основе .siblings() (https://javascript.ru/forum/events/74682-prijom-otbora-ehlementov-na-osnove-siblings.html)

рони 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>

рони 31.07.2018 15:28
Aetae,
:)

kvizor34 31.07.2018 15:35
Цитата:
Сообщение от Aetae (Сообщение 491391)
Кажется я понял (но не уверен :) ):
<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) вообще никогда не слышал) спасибо большое! :dance:

j0hnik 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>

Белый шум 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 31.07.2018 17:32
Белый шум
.each(function(){$(this).data('select', 'yes');});
== 
.data('select', 'yes')

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

SuperZen 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 копеек %)

Белый шум 01.08.2018 00:54
Цитата:
Сообщение от Aetae (Сообщение 491407)
JQuery всегда работает с массивами.
Да, перемудрил :(


Часовой пояс GMT +3, время: 07:04.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице