добавить стиль с 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> |
Спасибо большое!
Еще в строчке у меня тег <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> |
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> |
А если надо выделить все значения с 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,""). |
djonA,
не понимаю |
У меня есть:
<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х минимальных значения не трогаем, для остальных меняем фон |
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, время: 06:14. |