Как выбрать отдельные div, используя селекторы jQuery?

Question

Как чередовать стиль (цвет фона с помощью jQuery) для div внутри div с id="container" поочередно (четным и нечетным), если у меня есть HTML, например:

<div>
    <span>10%</span>
</div>
<div>
    <span>20%</span>
</div>
<div>
    <span>30%</span>
</div>
.....
.....

Как явыберите div с более чем 50% и выделите их, используя jQuery?

Answer 1

Вот альтернативное решение для селектора: even,: odd, плюс вам придется циклически проходить через div, чтобы получить 50% + вещь

$('#container div').each(function(index, elem){
        if (index % 2 == 0) {/*even*/}
        else 
        {/*odd*/}
    if (parseInt($(elem).chlidren('span').text()) >= 50) {/*50%+ highlight*/}
        });

Answer 2

используйте : четные , : нечетные селекторы

$("#container> div:even").css({'background-color':'Green'});

DEMO

---

чтобы проверить, содержит ли div 50%, используйте селектор contains

$("#container> div:contains(50%):even").css({'background-color':'Green'});

Демо

---

ОБНОВЛЕНИЕ: недостающая часть

$("#container> div").filter(function(){
  var val = $("span",this).text();
  var i = val.substring(0,2);
    console.log(i);
    if(i>50)return $(this);

}).filter(':even').css({'background-color':'Green'});

DEMO

Answer 3

$("#container > div:contains(50%)").nextAll().css({
    "background-color": "#FC0"
});

Используемые селекторы:

• Дочерний селектор («родитель> дочерний»)
• : содержит () селектор
• jQuery.nextAll ()

Редактировать : Я не совсем уверен, но, возможно, вы действительно хотите это:

$("#container > div > span").filter(function() {
    var text = $(this).text();
    var perc = parseInt(text, 10);
    return perc > 50;
}).css({
    "background-color": "#CF0"
});

Демо здесь

Answer 4

Это, кажется, отвечает на ваш оригинальный вопрос: http://jsfiddle.net/DRMZz/1/

jQuery(document).ready(function() {

    var text = jQuery('span').text();

    var textArray = text.split('%');

    for (var i = 0; i < textArray.length; i++) {
        if((parseInt( textArray[i] )) > 50){
            var spanSelector = 'span:eq(' + i + ')';
            console.log(spanSelector);
            jQuery(spanSelector).css('background','yellow');
        }
    };

});