如何使用jQuery选择器选择特定的div？

Question

如果我有这样的HTML，如何在div div内id="container"交替（偶数和奇数）替换<div> <span>10%</span> </div> <div> <span>20%</span> </div> <div> <span>30%</span> </div> ..... ..... 的样式（背景颜色与jQuery）：

{{1}}

如何选择50％以上的div并使用jQuery突出显示它们？

Answer 1

以下是：even，：奇数选择器的替代解决方案，另外你必须循环通过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:contains(50%)").nextAll().css({
    "background-color": "#FC0"
});

使用的选择器：

• Child Selector ("parent > child")
• :contains() selector
• jQuery.nextAll()

编辑：我不太确定，但也许你真的想要这个：

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

Demo here

Answer 3

使用:even，:odd选择器

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

DEMO

---

检查div是否包含50%使用contains选择器

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

Demo

---

更新：缺少的部分

$("#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 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');
        }
    };

}）;