JQuery笔记(四) 通用选择的尝试

时间:2022-04-23
本文章向大家介绍JQuery笔记(四) 通用选择的尝试,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

  常用的一种格式是用LI存放列表,一行一般会放2个内容,如标题和时间等。但这两个内容可能用的标签会有所不同,有时可能是<a>和<span>,有时可能是2个<span>,或者别的组合。所以我想尝试能否写一种通用的css,一次定义好LI的2个子项的样式。我这样写的

$(".blk .con li :eq(0)").css({display:"inline-block","width":"310px",overflow:"hidden"});  
$(".blk .con li :eq(1)").css({display:"inline-block","width":"40px",overflow:"hidden","margin-left":"10px",border:"1px solid red"});  

结果只对第一行有效,换成别的

$(".blk .con li").children(0).css({display:"inline-block","width":"310px",overflow:"hidden"});
  //LI的第一部分:宽度
$(".blk .con li *:eq(0)").css({display:"inline-block","width":"310px",overflow:"hidden"});  
$(".blk .con li *").get(0).css({display:"inline-block","width":"310px",overflow:"hidden"});  

等都失败。只有这个通过:

$(".blk .con li a").css({display:"inline-block","width":"310px",overflow:"hidden",border:"1px solid red"});
  //LI的第一部分:宽度
$(".blk .con li span").css({display:"inline-block","width":"40px",overflow:"hidden","margin-left":"10px",border:"1px solid red"}); 

我想each应该也可以,但实在麻烦,还不如每次我自己改js。