Форум

Hurray · #1 (**permalink**) 30.03.2014, 10:43

Есть несколько 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?

Zuenf · #2 (**permalink**) 30.03.2014, 10:59

Я бы использовал доступ к элементам по классу.
Вот два варианта:

<!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>

рони · #3 (**permalink**) 30.03.2014, 11:12

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>

Vlasenko Fedor · #4 (**permalink**) 30.03.2014, 17:03

<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>

* - содержит
^ - начинается

Форум

Справочник

Discord чат

Курсы javascript