代码之家 › 专栏 › 技术社区 › Boris Grunwald

设置DIV组的顺序属性。(jQuery)

jquery

Boris Grunwald · 技术社区 · 6 年前

我有以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>

    <script>
        $(document).ready(function () {

            $('.container:nth-child(2) div').children('div').each(function (index) {
                this.css('order',index)
            });
        })
    </script>

</head>
<body>

<div class="outerContainer">
    <div class="container"></div>
    <div class="container">
        <div>
            <p>20</p>
        </div>
        <div>
            <p>35</p>
        </div>
        <div>
            <p>-15</p>
        </div>
        <div>
            <p>7</p>
        </div>
        <div>
            <p>55</p>
        </div>
        <div>
            <p>1</p>
        </div>
        <div>
            <p>-22</p>
        </div>


    </div>
</div>



</body>
</html>

我想要的是在第二容器DIV到每个函数的当前索引。

然而,我的脚本并没有按预期工作。有人知道我哪里做错了吗?

1 回复 | 直到 6 年前

Andreas 6 年前

您的代码有多个问题:

~~第一 .container 错过了闭幕式 </div>~~
选择器 $('.container:nth-child(2) div') 已经得到孩子了 <div> 因此,以下内容 .children('div') 什么也找不到
this 事件处理程序内部是dom节点(即 <DIV & GT; )而不是jquery对象,因此没有 .css() 可获得的

$(document).ready(function() {
  $('.container:nth-child(2) div').each(function(index) {
    $(this).css('order', index)
           .text(index); // just for visualization
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerContainer">
  <div class="container">
    <!-- ... -->
  </div>
  <div class="container">
    <div>
      <p>20</p>
    </div>
    <div>
      <p>35</p>
    </div>
    <div>
      <p>-15</p>
    </div>
    <div>
      <p>7</p>
    </div>
    <div>
      <p>55</p>
    </div>
    <div>
      <p>1</p>
    </div>
    <div>
      <p>-22</p>
    </div>
  </div>
</div>