Question

我正在尝试使用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>

Answer 1

嗯，你可以更容易地通过UL循环，如下所示：

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

});

在那里检查if语句。＆＃34;这＆＃34;将是跨度本身。

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

循环列表项并检查宽度是否在线

2 个答案: