Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   добавить стиль с 3 елемента (https://javascript.ru/forum/jquery/72785-dobavit-stil-s-3-elementa.html)

djonA 26.02.2018 01:00

добавить стиль с 3 елемента
 
Подскажите как выделить красным цветом все елементы с 3.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){ 
$('.main').each(function(){
  $('.child', this).each(function(i){
    $(this).addClass('showhide' + (i+1));
  })
});});
</script>

<div class="main">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>

<div class="main">
<div class="child">1</div>
<div class="child">2</div>
</div>

Мне надо везде где showhide3 и выше (showhide4,showhide5 и т.д)
добавить: .css('color', 'red');

laimas 26.02.2018 01:07

Не нужно тут цикла, просто селектор класса + :contains(3)

рони 26.02.2018 01:10

djonA,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .main .child:nth-child(n+3) {
    color: red;
  }

  </style>

  </head>

<body>

<div class="main">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>

<div class="main">
<div class="child">1</div>
<div class="child">2</div>
</div>

</body>
</html>

laimas 26.02.2018 01:12

рони,
а если не это? :)

рони 26.02.2018 01:12

laimas,
что не так?

j0hnik 26.02.2018 01:13

сначала тоже про :contains(3) подумал, но потом снизу текст пару раз перечитал.

laimas 26.02.2018 01:15

Цитата:

Сообщение от рони
что не так?

Все так, но может нужно спрятать именно по содержимому.

djonA 26.02.2018 01:15

Спасибо!

djonA 26.02.2018 08:47

А можно как то определять не по порядковому номеру а величине значения.
Если к примеру:
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
.showhide {
background: red;
}
</style>
<script>
$(document).ready(function(){ 
$('.main').each(function(){
  $('.child:nth-child(n+3)', this).addClass('showhide');
});

});
</script>

  </head>

<body>

<div class="main">
<div class="child">4</div>
<div class="child">1</div>
<div class="child">3</div>
<div class="child">2</div>
</div>

<div class="main">
<div class="child">1</div>
<div class="child">2</div>
</div>

</body>
</html>

выделить надо не по порядковому номеру, а те div где значение больше 3 (3,4)

рони 26.02.2018 09:02

djonA,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
.showhide {
background: red;
}
</style>
<script>
$(document).ready(function(){
$('.main').each(function(){
  $('.child', this).filter(function() {
   return this.textContent - 2 > 0
}).addClass('showhide');
});

});
</script>

  </head>

<body>

<div class="main">
<div class="child">4</div>
<div class="child">1</div>
<div class="child">3</div>
<div class="child">2</div>
</div>

<div class="main">
<div class="child">1</div>
<div class="child">2</div>
</div>

</body>
</html>


Часовой пояс GMT +3, время: 10:53.