jquery - 设置div组的订单属性。（jQuery的） - Thinbug

设置div组的订单属性。（jQuery的）

时间：2019-01-05 13:33:47

标签： jquery

我有以下代码：

<!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>

我想将 second 容器div中每个div的flexbox order属性设置为每个函数的当前索引。

但是我的脚本无法正常工作。谁能看到我哪里出问题了？

1 个答案:

答案 0 :(得分：0)

您的代码有多个问题：

~~第一个.container缺少结尾</div>~~
选择器$('.container:nth-child(2) div')已获取子项<div>，因此以下.children('div')将找不到任何内容
this是事件处理程序内的DOM节点（<div>），而不是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>