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>
  • 相关阅读:
    sql server 跟踪各事件的字段项编码及解释
    sql server 有关锁的视图说明 syslockinfo
    SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace)
    [SqlServer]创建链接服务器
    SQL Server 2008 存储过程,带事务的存储过程(创建存储过程,删除存储过程,修改存储过
    sql server 索引分析相关sql
    IO系统性能之一:衡量性能的几个指标
    Writing to a MySQL database from SSIS
    用漫画的形式来讲解为什么MySQL数据库要用B+树存储索引?
    一份 Tomcat 和 JVM 的性能调优经验总结!拿走不谢
  • 原文地址:https://www.cnblogs.com/cag2050/p/5211430.html
Copyright © 2011-2022 走看看