<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content=""><meta name="keywords" content=""><title>Examples</title><style type="text/css">.text{width:40px;height:20;background:red;}? ? #wrap{width:1224px;overflow: auto;border:1px solid #000;margin:auto;}? ? .bg{margin-top:30px;border:1px solid #000;width:0px;margin-left:20px;width:280px;margin-bottom:20px;float:left;}? ? #wrap .bg .wrap_img{height:220px;margin-bottom:20px;margin-left:20px;}? ? #wrap .bg .wrap_text{background:#ccc;width:200px;margin-left:20px;padding:20px;margin-bottom:20px;}? ? .price b{float:left}? ? .price{float:right;background:pink;padding:5px 10px;line-height:15px;}</style></head><body><div class="text" onclick="sortPrice()">排序</div>? ? <div id="wrap">? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>4455</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>4300</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>5690</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>8800</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>4477</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>2300</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>3400</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>2100</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>3388</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>3355</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>5000</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="bg">? ? ? ? ? ? <div class="wrap_img"><img src="1.jpg" /></div>? ? ? ? ? ? <div class="wrap_text">? ? ? ? ? ? ? ? <span class="name">iphone6s</span>? ? ? ? ? ? ? ? <span class="price"><b>$</b>1180</span>? ? ? ? ? ? </div>? ? ? ? </div>? ? </div>? ? <script type="text/javascript">? ? var make=true;? ? function sortPrice(){? ? ? ? var div=document.getElementsByClassName("bg");? ? ? ? var divdome=[];? ? ? ? for(var i=0;i<div.length;i++){? ? ? ? ? ? divdome.push(div[i]);? ? ? ? }? ? ? ? divdome.sort(function(a,b){? ? ? ? ? ? ? ? var a=document.querySelector(".wrap_text .price").innerTest.substring(1);? ? ? ? ? ? ? ? var b=document.querySelector(".wrap_text .price").innerTest.substring(1);? ? ? ? ? ? ? ? if(make){? ? ? ? ? ? ? ? ? ? return a-b? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? return b-a? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? make!=make;? ? ? ? ? ? ? ? for(var j=0;j<divdome.length;j++){? ? ? ? ? ? ? ? ? ? document.getElementsByClassName("box").appendChild(divdome[j]);? ? ? ? ? ? ? ? }? ? ? ? });? ? }? ? </script></body></html>
這里怎么無(wú)法排序,感覺(jué)思維不靈活咋辦???
慕粉3884565
2017-04-09 18:33:07