Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2014, 10:43
Аспирант
Отправить личное сообщение для Hurray Посмотреть профиль Найти все сообщения от Hurray
 
Регистрация: 22.02.2012
Сообщений: 70

Как выбрать элементы по определённому правилу?
Есть несколько 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?
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2014, 10:59
Аватар для Zuenf
Кандидат Javascript-наук
Отправить личное сообщение для Zuenf Посмотреть профиль Найти все сообщения от Zuenf
 
Регистрация: 27.01.2012
Сообщений: 134

Я бы использовал доступ к элементам по классу.
Вот два варианта:
<!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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2014, 17:03
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

* - содержит
^ - начинается
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
как выбрать параметр из url? Trahbumbeiten Javascript под браузер 5 10.01.2014 19:06
Как выбрать из json-массива только не повторяющиеся элементы? Dimaz Общие вопросы Javascript 3 19.12.2012 00:11
Как выбрать элемент массива Dimaz jQuery 1 25.11.2012 19:33
Как поменять местами элементы в дереве элемента родителя? rar11 Events/DOM/Window 8 01.04.2009 18:53