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>

djonA 26.02.2018 15:06
Спасибо большое!
Еще в строчке у меня тег <a> - это я добавил.
Но вот в нем мне еще предварительно надо очистить текст от всего кроме текста в скобках.
Не получается...
Пытался написать регулярку, но чего то не получается, что бы очищало от всего кроме цифр в скобках.

<!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(){
regul= /\$\d+(?=\))/;
$('.main').each(function(){
  $('.child', this).find('a').filter(function() {
   return regul.exec(this.textContent) - 2 > 0
}).addClass('showhide');
});

});
</script>

  </head>

<body>

<div class="main">
<div class="child"><a href="/">4</a></div>
<div class="child"><a href="/">абв (1)</a></div>
<div class="child"><a href="/">абв (3)</a></div>
<div class="child"><a href="/">абв (2)</a></div>
</div>

</body>
</html>

рони 26.02.2018 15:23
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(){
var regul= /\D/g;
$('.main').each(function(){
  $('.child', this).filter(function() {
   return this.textContent.replace(regul,"") - 2 > 0
}).addClass('showhide');
});

});
</script>

  </head>

<body>

<div class="main">
<div class="child"><a href="/">4</a></div>
<div class="child"><a href="/">абв (1)</a></div>
<div class="child"><a href="/">абв (3)</a></div>
<div class="child"><a href="/">абв (2)</a></div>
</div>

</body>
</html>

djonA 26.02.2018 19:19
А если надо выделить все значения с 3 от минимального. Но вначале мы не знаем какие будут значения и сколько их будет.
<!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(){
var regul= /\D/g;
$('.main').each(function(){

$a= "" // тут в каждом будет свое, но как его вычислить

  $('.child', this).filter(function() {
   return this.textContent.replace(regul,"")  > $a 
}).addClass('showhide');
});

});
</script>

  </head>

<body>

<div class="main">
<div class="child"><a href="/">абв (12)</a></div> // тут надо выделить
<div class="child"><a href="/">абв (8)</a></div>
<div class="child"><a href="/">абв (15)</a></div> // тут надо выделить
<div class="child"><a href="/">абв (22)</a></div> // тут надо выделить
<div class="child"><a href="/">абв (4)</a></div>
</div>

<div class="main">
<div class="child"><a href="/">абв (3)</a></div>
[COLOR="red"]<div class="child"><a href="/">абв (8)</a></div> // тут надо выделить[/COLOR]
<div class="child"><a href="/">абв (1)</a></div>
[COLOR="red"]<div class="child"><a href="/">абв (12)</a></div> // тут надо выделить[/COLOR]

</div>

</body>
</html>


т.е очистил от текста а дальше первые 2 значения не выделяю а с 3 все выделяю, но не по порядковому номеру а по
this.textContent.replace(regul,"").

рони 26.02.2018 20:01
djonA,
не понимаю

djonA 26.02.2018 20:51
У меня есть:
<div class="main">
<div class="child"><a href="/">абв (тут значение произвольные везде разные)</a></div>
</div>


мне надо внутри каждого <div class="main"> выбрать 2 минимальных значения вот этих <div class="child"><a href="/">абв (этих)</a></div> и их не трогать, а для всех остальных внутри <div class="main"> добавить какой то класс или задний фон.

Сложность в том что надо налету искать где 2 минимальных значения, и для всех остальных добавлять скажем задний фон.
<div class="main">
<div class="child"><a href="/">абв (12)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (8)</a></div>
<div class="child"><a href="/">абв (15)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (22)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (4)</a></div>
</div>

<div class="main">
<div class="child"><a href="/">абв (3)</a></div>
<div class="child"><a href="/">абв (8)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (1)</a></div>
<div class="child"><a href="/">абв (12)</a></div> // тут надо добавить фон
</div>


для 2х минимальных значения не трогаем, для остальных меняем фон

рони 26.02.2018 21:40
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(){
var regul= /\D/g;
$('.main').each(function(){
   var child = $('.child', this).get().sort(function(a,b) {
   return a.textContent.replace(regul,"") - b.textContent.replace(regul,"")
});
$(child.slice(2)).addClass('showhide')
  });
});
</script>

  </head>

<body>

<div class="main">
<div class="child"><a href="/">абв (12)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (8)</a></div>
<div class="child"><a href="/">абв (15)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (22)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (4)</a></div>
</div>

<div class="main">
<div class="child"><a href="/">абв (3)</a></div>
<div class="child"><a href="/">абв (8)</a></div> // тут надо добавить фон
<div class="child"><a href="/">абв (1)</a></div>
<div class="child"><a href="/">абв (12)</a></div> // тут надо добавить фон
</div>


</body>
</html>


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