滑动拼图jquery

Question

我正在尝试通过jquery解决滑动问题（3 * 3网格）。

在我的HTML文件中，我有8 li（第9个空白）。

    <ul class="Puzzle">
        <li class="Box Box1">1</li>
        <li class="Box Box2">2</li>
        <li class="Box Box3">3</li>
        <li class="Box Box4">4</li>
        <li class="Box Box5">5</li>
        <li class="Box Box6">6</li>
        <li class="Box Box7">7</li>
        <li class="Box Box8">8</li>
    </ul>

我想通过jQuery访问我的js（javascript文件）中的这些li，以便实现滑动效果。我试图通过jQuery.map（）函数将它们转换为数组，但是没有用

    var liclass = $('Puzzle li').map(function(i,n){
            return $(n).attr('class');
        }).get().join(',');

有人可以告诉我如何将它们转换为数组并在我的js文件中使用它们。

谢谢

Answer 1

获得这些li（包装为jQuery对象）的集合所需要做的就是

var lis = $('.Puzzle li')

您缺少.-jQuery类名选择器应以句点开头（如CSS中一样。）>

如果您需要一个数组来保存这些li中的数字，应该是

var arr = $('.Puzzle li').map(function() {
    $(this).text();
}).get();
请参阅此（控制台）：

var lis = $('.Puzzle li');
var arr = lis.map(function() {
  return $(this).text();
}).get();

console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="Puzzle">
  <li class="Box Box1">1</li>
  <li class="Box Box2">2</li>
  <li class="Box Box3">3</li>
  <li class="Box Box4">4</li>
  <li class="Box Box5">5</li>
  <li class="Box Box6">6</li>
  <li class="Box Box7">7</li>
  <li class="Box Box8">8</li>
</ul>