добавить стиль с 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'); |
Не нужно тут цикла, просто селектор класса + :contains(3)
|
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,
что не так? |
сначала тоже про :contains(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(){
$('.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) |
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, время: 03:01. |