Как выбрать элементы по определённому правилу?
Есть несколько divов:
<div id="step1"></div> <div id="step2"></div> <div id="step3"></div> <div id="step4"></div> <div id="step5"></div> <div id="step6"></div> и другие... Как выбрать те, у которых в id число после step больше чем 3? |
Я бы использовал доступ к элементам по классу.
Вот два варианта:
<!doctype html>
<html>
<head>
<title>StepTest</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
//id
$('[id*=step]').each(function(i){
if(i>2) $(this).css('color', 'red');
});
//class
$('.step').each(function(i){
if(i>2) $(this).css('color', 'red');
});
});
</script>
</head>
<body>
id:<br>
<div id="step1">test1</div>
<div id="step2">test2</div>
<div id="step3">test3</div>
<div id="step4">test4</div>
<div id="step5">test5</div>
<div id="step6">test6</div>
<br>
class:<br>
<div class="step">test1</div>
<div class="step">test2</div>
<div class="step">test3</div>
<div class="step">test4</div>
<div class="step">test5</div>
<div class="step">test6</div>
</body>
</html>
|
Hurray,
Zuenf, Вариант с css и без ...
<!doctype html>
<html>
<head>
<title>StepTest</title>
<style type="text/css">
[id*=step]:nth-of-type(n+4){
background-color: #00FF00;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
//id
$('[id*=step]:gt(2)').css('color', 'red');
;
//class
$('.step:gt(2)').css('color', 'red');
});
</script>
</head>
<body>
id:<br>
<div id="step1">test1</div>
<div id="step2">test2</div>
<div id="step3">test3</div>
<div id="step4">test4</div>
<div id="step5">test5</div>
<div id="step6">test6</div>
<br>
class:<br>
<div class="step">test1</div>
<div class="step">test2</div>
<div class="step">test3</div>
<div class="step">test4</div>
<div class="step">test5</div>
<div class="step">test6</div>
</body>
</html>
|
<style>
.red {
color: red;
}
</style>
<div id="step1">test1</div>
<div id="step2">test2</div>
<div id="step3">test3</div>
<div id="step4">test4</div>
<div id="step5">test5</div>
<div id="step6">test6</div>
<script>
window.onload = function () {
var els = document.querySelectorAll('div[id^=step]:nth-of-type(n+4)'),
len = els.length;
while (els[--len].className = "red"); // как всегда :-)
};
</script>
* - содержит ^ - начинается |
| Часовой пояс GMT +3, время: 20:33. |