none
jQuery如何对一个DIV序列操作? RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    我想让CpyPdtTab1、CpyPdtTab2、CpyPdtTab3三个DIV在初始化的时候都显示<ul><li>111111111111111111</li></ul>

    我用jQuery中的each循环好像不管用.请问各位应该怎么弄呀?

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
.CpyPdtTab
{
	width: 600px;
	height: 200px;
	border: 1px solid #CCCCCC;
}
.TabADSCon
{
	border: 1px solid #FFD7D7;
	width: 100%;
	height: 158px;
}
.TabADSCon ul
{
	display: none;
}
.TabADS
{
	width: 100%;
	height: 38px;
	border: 1px solid #99CCFF;
}
.TabADS ul
{
	height: 38px;
	width: 100%;
}
.TabADS li
{
	float: left;
	height: 38px;
	width: 25%;
	background-color: #D2E9FF;
	line-height: 38px;
	list-style-type: none;
	text-align: center;
	cursor:pointer; 
}
.TabADS .TasADSOn
{
	font-weight: bold;
	background-color: #99CCFF;
	cursor:pointer;
}
  </style>
  <script src="jQuery/jquery.js" type="text/javascript"></script>
  <script language="javascript" type="text/javascript">
    $(document).ready(function () {
      var cptArr = ["#CpyPdtTab1", "#CpyPdtTab2", "#CpyPdtTab3"];
      var tconArr = [4, 5, 3];
      var CpyPdtTab = $("div[id^='CpyPdtTab']");

      CpyPdtTab.addClass("CpyPdtTab");
      $("#myTabcc").each(function (i) {
        $(cptArr[i] + " .TabADSCon ul:eq(0)").css("display", "block");
      });
    });
  </script>
</head>
<body>
<div id="myTabcc">
  <div id="CpyPdtTab1">
    <div class="TabADSCon">
      <ul>
        <li>111111111111111111</li>
      </ul>
      <ul>
        <li>222222222222222</li>
      </ul>
      <ul>
        <li>33333333333333</li>
      </ul>
      <ul>
        <li>44444444444444</li>
      </ul>
    </div>
    <div class="TabADS">
      <ul>
        <li class="TasADSOn">房产</li>
        <li>家居</li>
        <li>买房</li>
        <li>视频</li>
      </ul>
    </div>
  </div>
  <br />
  <br />
  <div id="CpyPdtTab2">
    <div class="TabADSCon">
      <ul>
        <li>111111111111111111</li>
      </ul>
      <ul>
        <li>222222222222222</li>
      </ul>
      <ul>
        <li>33333333333333</li>
      </ul>
      <ul>
        <li>44444444444444</li>
      </ul>
      <ul>
        <li>5555555555555555</li>
      </ul>
    </div>
    <div class="TabADS">
      <ul>
        <li class="TasADSOn">房产</li>
        <li>家居</li>
        <li>买房</li>
        <li>视频</li>
        <li>视频</li>
      </ul>
    </div>
  </div>
  <br />
  <br />
  <div id="CpyPdtTab3">
    <div class="TabADSCon">
      <ul>
        <li>111111111111111111</li>
      </ul>
      <ul>
        <li>222222222222222</li>
      </ul>
      <ul>
        <li>33333333333333</li>
      </ul>
    </div>
    <div class="TabADS">
      <ul>
        <li class="TasADSOn">房产</li>
        <li>家居</li>
        <li>买房</li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
    • 已编辑 hkstb 2010年7月17日 2:46 输入错误
    • 已移动 Sheng Jiang 蒋晟 2010年7月17日 15:56 客户端脚本问题 (发件人：ASP.NET 与 AJAX)
    2010年7月17日 2:44
    |

答案

  • Question
    登录进行投票
    1
    登录进行投票

    jQuery的接口很简单的，别把它们用太复杂啦。

    比如要给CpyPdtTab1、CpyPdtTab2、CpyPdtTab3三个ID的元素执行相同操作，选择器里可以写多个匹配项的，用逗号隔开就可以了：

    $('#CpyPdtTab1,#CpyPdtTab2,#CpyPdtTab3').css('display','block');

    这样就都加上了display:block的CSS。

    上面HTML代码里默认那三个元素已经是显示的吧？因为我没有在CSS里发现隐藏它们的代码？

    jQuery的each也很容易的，用法是在一个集合上调用each函数可以对每一个元素进行操作，比如：

    $('div').each(funcation(i, item){
  $(item).html('item ' + i);
});
    这样就会对每一个div里面添加了内容。

    Please mark the post answered your question as the answer, and vote other helpful posts, so they will appear differently to other users for the same problem. 请将解决实际问题的帖子标记为“答案”，并给其他有帮助的帖子投票，这样其他人有同样问题的时候可以快速找到解决方案。谢谢！
    • 已标记为答案 hkstb 2010年7月17日 15:15
    2010年7月17日 14:50
    |