Question

我有以下HTML代码，我已将背景颜色红色设为#list。如果li的数量大于5，我想将背景更改为蓝色。请协助

  <html>
  <head>
  <script src="jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
      var len= $("#list li").size();
      if(len>5){
      // i need the code to style the #list here if number of li is more than 5, say background to blue
}
  });
  </script> 
  </head>
  <body>
  <ul id="list" style="background:red; width:300px;height:300px;">
<li>Image 1</li>
<li>Image 2</li>
    <li>Image 3</li>
<li>Image 4</li>
    <li>Image 5</li>
<li>Image 6</li>
    <li>Image 7</li>
<li>Image 8</li>
    <li>Image 9</li>
<li>Image 10</li>
  </ul>
  </body>
  </html>

Answer 1

您需要使用.length代替size()。

var len= $("#list li").length;
if(len>5){
    $("#list").css("background-color","blue"); //use .css() to change the background color
}

Answer 2

使用css method

if(len>5){
    $("#list").css("background-color","blue");
}

根据您的评论，您可以使用多个css属性和值包裹在内侧大括号{}中，如下所示：

if(len>5){
        $("#list").css({"background-color":"blue","color":"white"});
    }

Answer 3

这是代码

<ul id="list" style="background:red; width:300px;height:300px;">
<li>Image 1</li>
<li>Image 2</li>
    <li>Image 3</li>
<li>Image 4</li>
    <li>Image 5</li>
<li>Image 6</li>
    <li>Image 7</li>
<li>Image 8</li>
    <li>Image 9</li>
<li>Image 10</li>
  </ul>

var len= $("#list li").length;
      if(len>5){
      $("#list").css("background-color","blue");

}

JsFriddle Code

Answer 4

试试这个

<script type="text/javascript">
  $(document).ready(function(){
      $("#list").css("background-color","red");
      if($("#list li").length>5){
        $("#list").css("background-color","blue");
      }
  });
  </script>

Answer 5

var len= $("#list li").length;
if(len>5)
     $("#list").addClass('blue').removeClass('red');   
else
     $("#list").addClass('red').removeClass('blue');

你在CSS中的蓝色类是

.blue
{
    background-color : blue
 }
.red
{
   background-color : red
}

Answer 6

试试这个，

Demo

($("#list li").length > 5) ? $("#list").css("background","blue"):$("#list").css("background","red")

使用基于条件的jquery进行样式化

6 个答案: