Question

HTML

<li title="State - IpAddress">
    <div>
        <div class="inline">
            <div class="circlecolor" class="no-class"></div>  
        </div>
        <div class="inline">
            <div class="state-ip" data-value="%s">
                <span>%s - %s</span>
            </div>
        </div>
        <a href="#showInfo" class="popover-control">
            <img alt="Help" height="13" src="images/questionmark.png" title="know more about states" width="13" />
        </a>
    </div>
</li>

的javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
     $('.state-ip').each(function() {
        var mb=$(this).data('value');
        alert($(this));

        alert(mb); 
        if(mb == "AVAILABLE"){
          alert("Inside if");
         $(".circlecolor").removeClass().addClass("success");

     }
        else if(mb == "ERROR"){
                alert("Inside error");
                $(".circlecolor").removeClass().addClass("error");
        }
        else{
                alert("Inside else");
                $(".circlecolor").removeClass().addClass("impaired");
        }
    });
});
</script>

CSS

div.no-class{
background-color: #808080;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

 div.success{
background-color: #009933;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
 div.error{
background-color: #FF3300;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

div.impaired{
background-color: #FF9900;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

关注Populate divs based on some value of div，我将上面的html，css和js添加到我的项目中。问题是：

我在做

$('circlecolor').removeClass().addClass("XXXX");

所以即使控制权转移到所有if和else基于＆＃34; .state-ip＆＃34;类值，我可以在日志中看到它工作正常。但是为类增加颜色是基于if和所有div。我该怎么办呢 $(this.circlecolor).removeClass().addClass("XXXX");？

因此，如果我在网页上有2个div，其中state-ip值为＆＃34; AVAILABLE＆＃34;和＆＃34; UNSUABLE＆＃34;，然后我期待颜色＆＃34; GREEN＆＃34;和＆＃34; ORANGE＆＃34;分别

Answer 1

无论上下文如何，

$(".circlecolor")都会找到类circlecolor的所有元素。因此，您需要找到.closest()列表项，然后使用.find()在当前（this）元素的上下文中定位元素，如下所示。

$('.state-ip').each(function() {
    var mb = $(this).data('value');
    var $circlecolor = $(this).closest("li").find(".circlecolor");

    $circlecolor.removeClass();

    if(mb == "AVAILABLE") {
        alert("Inside if");
        $circlecolor.addClass("success");

    }
    else if(mb == "ERROR") {
        alert("Inside error");
        $circlecolor.addClass("error");
    }
    else {
        alert("Inside else");
        $circlecolor.addClass("impaired");
    }
});

而且，以下是上述的较短版本：

$('.state-ip').each(function() {

    var mb = $(this).data('value');
    var $circlecolor = $(this).closest("li").find(".circlecolor");
    var _class = mb === "AVAILABLE" && "success" || mb === "ERROR" && "error" || "impaired";
    $circlecolor.removeClass().addClass(_class);
});

Answer 2

您可以使用jQuery(this).parents()定位数据 - *选择器的父div，然后在那里找到.circle;

var mb=$(this).data('value'),
parents = $(this).parents(), //you can specify how deep you want to go via DOM, using parents.eq(n) method
circle = parents.find('.circle')
console.log(circle);
alert($(this));

Answer 3

您可以使用jQuery's next来实现您的目标：

$(this).next('.circlecolor').removeClass().addClass(XXX);

根据div的值填充div

HTML

的javascript

CSS

3 个答案: