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

  • 问题

  • 我想让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

答案

  • 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