如何用jQuery实现单双数排列?(实用篇)

Posted PHP项目中心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用jQuery实现单双数排列?(实用篇)相关的知识,希望对你有一定的参考价值。


步骤解析

第一步:

先到jQuery官网下载jQuery插件,并且引到html页面来

<script type="text/javascript" ></script>

写HTML代码:

代码示范




<!DOCTYPE html>

<html>


<head>

<meta charset="utf-8" />

<title>单双数排列简单例子</title>

<link rel="stylesheet" href="css/style.css" />

<script type="text/javascript" ></script>

<script type="text/javascript" ></script>

</head>


<body>

<ul>

<li>

<div>新闻内容1</div>

</li>

<li>

<div>新闻内容2</div>

</li>

<li>

<div>新闻内容3</div>

</li>

<li>

<div>新闻内容4</div>

</li>

<li>

<div>新闻内容5</div>

</li>

<li>

<div>新闻内容6</div>

</li>

</ul>

</body>


</html>


第二步:

写CSS样式:

代码示范




* {

margin: 0;

padding: 0;

list-style: none;

text-decoration: none;

color: black;

}


ul {

width: 600px;

height: 600px;

background: yellowgreen;

}


ul li {

height: 40px;

}


ul li div {

width: 300px;

height: 40px;

}


第三步:

写jQuery语句:

代码示范



$(function() {

$('ul li:even').find('div').css({

float: 'left',

'background': 'red'

});

$('ul li:odd').find('div').css({

float: 'right',

background: 'blue'

});

})


例子演示地址:

如何用jQuery实现单双数排列?(实用篇)

  

实现效果:

  

 技术微周刊 



「技术微周刊」分享技术文章与动态。周刊的内容会挑选出一周的精彩内容,有技术干货、技术动态,也有技术人生,欢迎关注与分享。



php项目中心

以上是关于如何用jQuery实现单双数排列?(实用篇)的主要内容,如果未能解决你的问题,请参考以下文章

如何用jquery美化单选按钮和复选框

如何用Jquery控制单选按钮点击否然后隐藏其他文本框

简明教程:如何用 Django 写一个编程派?

如果一个元素正在被动画,我如何用 jQuery 找出?

如何用jquery实现实时监控浏览器宽度

如何用复选框jQuery替换数组中的值