zoukankan      html  css  js  c++  java
  • each和$(this)配合循环_siblings选取同级不同类型元素

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    //如果标题在一行,不显示日期
    $(document).ready(function() {    
       //循环样式类名为news_list_newswz9的ul下li下div
       $("ul.news_list_newswz9 li div").each(function() {
           //如果div高度为28,并且链接标题的文字大于12
           if($(this).height() == 28 && $(this).children().text().length > 12 )
           {
               //隐藏当前元素的同级元素span
               $(this).siblings("span").hide();
               //设置父元素li的高度为28
               $(this).parent().height("28");
           };
       });
    });
    </script>
    <style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .news_list_newswz9 {
        line-height: 28px;
        height: 275px;
        overflow: hidden;
        position: relative;
    }
    .news_list_newswz9 li {
        background: url(http://60.212.191.54/picture/0/1512202042336565591.gif) no-repeat 8px 14px;
        font-size: 14px;
        position: relative;
        width: 200px;
    }
    .news_list_newswz9 li span {
        right: 0px;
        text-align: right;
        padding-left: 10px;
        color: #999;
        position: absolute;
        margin-right: -50px;
    }
    .news_list_newswz9 li div {
        left: 0px;
        text-align: left;
        padding-left: 20px;
        position: absolute;
        width: 230px;
    }
    </style>
    </head>
    
    <body>
    <UL class=news_list_newswz9>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=威海-天津-空铁联运免费进京新模式 
      href="" 
      target=_blank>威海-天津-空铁联运免费进京新模式</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">威海-天津-空铁联运免费进京新模式</FONT><SPAN 
      style="FONT-SIZE: 14px">02-22</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=奥林国际健身中心春节期间营业时间 
      href="" 
      target=_blank>奥林国际健身中心春节期间营业时间</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">奥林国际健身中心春节期间营业时间</FONT><SPAN 
      style="FONT-SIZE: 14px">02-03</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=威海乒羽健身中心乒乓球馆、羽毛球馆春节期间营业时间 
      href="" 
      target=_blank>威海乒羽健身中心乒乓球馆、羽毛球馆春节期间营业时间</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">威海乒羽健身中心乒乓球馆、羽毛球馆春节期间营业时间</FONT><SPAN 
      style="FONT-SIZE: 14px">02-03</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=单位概况 
      href="" 
      target=_blank>单位概况</A></DIV>
        <FONT style="VISIBILITY: hidden">单位概况</FONT><SPAN 
      style="FONT-SIZE: 14px">02-01</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=威海热电集团全力以赴抗击寒流保障供热 
      href="" 
      target=_blank>威海热电集团全力以赴抗击寒流保障供热</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">威海热电集团全力以赴抗击寒流保障供热</FONT><SPAN 
      style="FONT-SIZE: 14px">01-29</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=好消息!春运期间威海长春加班了! 
      href="" 
      target=_blank>好消息!春运期间威海长春加班了!</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">好消息!春运期间威海长春加班了!</FONT><SPAN 
      style="FONT-SIZE: 14px">01-28</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=威海机场自1月29日起开通威海=天津航班 
      href="" 
      target=_blank>威海机场自1月29日起开通威海=天津航班</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">威海机场自1月29日起开通威海=天津航班</FONT><SPAN 
      style="FONT-SIZE: 14px">01-28</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=山东广电网络威海有限公司获得“威海市职工百项技术创新成果奖” 
      href="" 
      target=_blank>山东广电网络威海有限公司获得“威海市职工百项技术创新成果奖”</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">山东广电网络威海有限公司获得“威海市职工百项技术创新成果奖”</FONT><SPAN 
      style="FONT-SIZE: 14px">01-28</SPAN></LI>
      <LI>
        <DIV><A style="FONT-SIZE: 14px" title=成功上线开通智慧社区医院挂号业务 
      href="" 
      target=_blank>成功上线开通智慧社区医院挂号业务</A></DIV>
        <FONT 
      style="VISIBILITY: hidden">成功上线开通智慧社区医院挂号业务</FONT><SPAN 
      style="FONT-SIZE: 14px">01-28</SPAN></LI>
    </UL>
    </body>
    </html>
  • 相关阅读:
    POJ3159 Candies —— 差分约束 spfa
    POJ1511 Invitation Cards —— 最短路spfa
    POJ1860 Currency Exchange —— spfa求正环
    POJ3259 Wormholes —— spfa求负环
    POJ3660 Cow Contest —— Floyd 传递闭包
    POJ3268 Silver Cow Party —— 最短路
    POJ1797 Heavy Transportation —— 最短路变形
    POJ2253 Frogger —— 最短路变形
    POJ1759 Garland —— 二分
    POJ3685 Matrix —— 二分
  • 原文地址:https://www.cnblogs.com/cag2050/p/5211430.html
Copyright © 2011-2022 走看看