循环遍历列表项并检查内联的宽度

我想通过使用jquery的列表循环，并查找是否有任何跨度的设置宽度为95％。如果是，则将颜色更改为BG颜色为红色，或者如果它为50％，则将BG颜色更改为黄色。任何想法我可以做到这一点？循环遍历列表项并检查内联的宽度

我已经开始循环。

JQUERY

// .skills = UL 

$('.skills').each(function(i) { 
var list = $(this).find('li span'); 

    if (list.attr('style').indexOf('width') == 95) { 
     alert('hello'); 
    } 

});

HTML

<section class="column strengths"> 

    <ul class="skills"> 
     <li class="html"><b class="centered">HTML</b><div class="meter"><span style="width: 95%"></span></div></li> 
     <li class="css"><b class="centered">CSS</b><div class="meter"><span style="width: 50%"></span></div></li> 
     <li class="js">JS</li> 
     <li class="jquery">Jquery</li> 
     <li class="java">Java</li> 
     <li class="php">PHP</li> 
     <li class="ps">PS</li> 
     <li class="ai">AI</li> 
    </ul> 

</section>

来源

2014-12-02 ryan

很可能是张贴HTML是一个好主意。 – j08691 2014-12-02 22:26:30

in if if you should use === or == instead of = – 2014-12-02 22:32:00

这是一个错字，很抱歉。 if语句已被设置为'=='，但仍然没有任何作用。 – ryan 2014-12-02 22:36:59

indexOf返回字符串中子字符串的位置，如果未找到则返回-1。所以它永远不会等于95，除非字母宽度开始于样式的位置96。您可以这样做：$(this).attr('style').indexOf('width: 95%') > -1
您不能将宽度分配给静态定位的内联元素（span）。
尽量避免使用内嵌CSS。改为将样式移至外部CSS文件。
而不是搜索样式属性，考虑检查width风格本身：

$('.skills li span').each(function() { 
 
    if(this.style.width === '95%') { 
 
    alert('hello'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="skills"> 
 
    <li class="html"><b class="centered">HTML</b><div class="meter"><span style="width: 95%"></span></div></li> 
 
    <li class="css"><b class="centered">CSS</b><div class="meter"><span style="width: 50%"></span></div></li> 
 
    <li class="js">JS</li> 
 
    <li class="jquery">Jquery</li> 
 
    <li class="java">Java</li> 
 
    <li class="php">PHP</li> 
 
    <li class="ps">PS</li> 
 
    <li class="ai">AI</li> 
 
</ul>

来源

2014-12-02 23:10:05

那么你就可以通过UL更容易周期跨度是这样的：if语句中

$('.skills li span').each(function(i) { 

});

掷那里ch宽度。 “这”将是跨度本身。

来源

2014-12-02 22:35:24

循环遍历列表项并检查内联的宽度

回答

相关问题