Good day. While I was not showered with slippers, which I cannot add by clicking on a button on a class block, I hasten to notice what I can do. I have a different situation at the moment. There is a block with an unlimited number of children, the number I get by pressing a button, like this:

$('.range__read-more--link').click(function () { var slide = $('.range__slider__item--wrapper').children(); for (var i = 0; i < slide.length; i++) { console.log(slide[i]); } });

One click on the button should be added to one of the child elements each time a class. But with this I had a difficulty, and I ask for your help. If I specify

 $(slide[i]).addClass('active');

So I add this class to all child blocks.

 <section class="range"> <div class="slider range__slider"> <div class="range__slider__item--wrapper"> <div class="range__slider__item"> <div class="range__slider__img"><img src="img/production-items-1.png"></div> <div class="range__slider__info mCustomScrollbar"> <div class="range__slider__info__title">Идейные соображения высшего порядка, а также укрепление. </div> <p class="range__slider__info__description">Номенклатура конвейерных лент Nitta по-настоящему широкая</p></div> </div> </div> <div class="range__slider__item--wrapper"> <div class="range__slider__item"> <div class="range__slider__img"><img src="img/production-items-1.png"></div> <div class="range__slider__info mCustomScrollbar"> <div class="range__slider__info__title">Идейные соображения высшего порядка, а также укрепление </div> <p class="range__slider__info__description">Номенклатура конвейерных лент Nitta по-настоящему широкая</p></div> </div> </div> </div> <div class="range__read-more--link">Читать дальше</div>

You need to add a class to range__slider__item - wrapper

And how to do that when we add a class to all the child blocks, the button is hidden? I added

 if (curSlide > slides.length) { $('.range__read-more--link').hide(); }

But, it disappears when you press a button, and I need, when the last child is shown, then we hide the button.

Question solved, forgot to add> = instead of>

  • Do you want an element with a specific index to add a class? - Regent
  • And how to determine which class to hang on? - br3t
  • I have a parent .range__slider, it has .range__slider__item blocks - wrapper, so I need to hang a class on them. - Masha Bubble
  • @MashaBubble is not clearer. First, add a minimal HTML example to the question. Second, decide on which of the children you need to hang the class on. If at all, what's the problem? Or do children() not take what you need? - Regent
  • @MashaBubble how to choose a specific element to add a class: everything consistently or randomly or how? - br3t

2 answers 2

We hang the class consecutively to those elements that do not yet have it:

 var curSlide = 0; var slides = $('.range__slider').find('.range__slider__item--wrapper'); function highLightSlide() { slides.removeClass('active'); slides.eq(curSlide % slides.size()).addClass('active'); curSlide++; } $('.range__read-more--link').click(function() { highLightSlide(); }); highLightSlide(); 
 .active { background: #F00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button class="range__read-more--link">Click</button> <div class="range__slider"> <div class="range__slider__item--wrapper">1</div> <div class="range__slider__item--wrapper">2</div> <div class="range__slider__item--wrapper">3</div> <div class="range__slider__item--wrapper">4</div> <div class="range__slider__item--wrapper">5</div> </div>

  • This is where you read that you need to hang a class on the blocks one by one? - Regent
  • @Regent "In turn," I suggested that the option "add to the random block" is possible, but rather similar to the sequential reading of articles in some slider. - br3t
  • @ br3t, yes, you are right, this is a slider, but on the mobile I need to hide it, and by pressing the button show the "next slide" - Masha Bubble
  • @MashaBubble, corrected for "everything is consistent" - br3t
  • @ br3t, thank you very much)))) Everything works, I just replaced slides.size () with slides.length, the atom swore for some reason. - Masha Bubble

Limit the selection to the block that was clicked:

 var slide = $(this).closest('.range__slider'). find('.range__slider__item--wrapper').children();