Question

我使用此方法有或没有区域边框，请告诉我们如何获取名为item-box item-box-active的计数类

的Javascript

function next() {
    elementarray = document.querySelectorAll('#area-bounding-box .item-box item-box-active');
    if (elementarray.length === 0) {
        document.getElementById("btCount").innerHTML = "5";
    } else {
        document.getElementById("btCount").innerHTML = "2";
    }
    arr.push(elementarray.length);
    console.log(arr);
}

HTML

<div class="area-bounding-box" style="margin-top: 87.5px;">
    <img src="s3.-9278-494d-bfe5-e174e762089c.jpg" style="visibility: visible;">
    <div class="item-box item-box-active item-box-editing" data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c" style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%;">
        <span class="icon-resize icon-resize-tl"></span>
        <div class="area-move"></div>
        <div class="area-btns"><a class="btn btn-delete" href="#">
         <i class="fa fa-times" aria-hidden="true">
         </i>
         </a>
        </div>
        <div class="item-box item-box-active item-box-editing" data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9" style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%;">
            <span class="icon-resize icon-resize-tl">
         <div class="area-move"></div>
         <div class="area-btns"><a class="btn btn-delete" href="#">
            <i class="fa fa-times" aria-hidden="true">
            </i>
            </a>
         </div>
      </div>
   </div>
</div>

Answer 1

请勿使用**.item-box item-box-active**之间的空格，将其替换为.

elementarray = document.querySelectorAll('.area-bounding-box .item-box.item-box-active');

另请注意area-bounding-box是一个类。

<强>演示

＆＃13;

var elementarray = document.querySelectorAll('.area-bounding-box .item-box.item-box-active');
console.log( elementarray.length )

＆＃13;

<div class="area-bounding-box" style="margin-top: 87.5px;">
  <img src="s3.-9278-494d-bfe5-e174e762089c.jpg?…;" style=" visibility: visible; ">
  <div class="item-box item-box-active item-box-editing " data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c " style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%; ">
    <span class="icon-resize icon-resize-tl "></span>
    <div class="area-move "></div>
    <div class="area-btns ">
      <a class="btn btn-delete " href="# ">
        <i class="fa fa-times " aria-hidden="true "></i>
      </a>
    </div>
    <div class="item-box item-box-active item-box-editing " data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9 " style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%; ">
      <span class="icon-resize icon-resize-tl ">
    <div class="area-move "></div>
    <div class="area-btns ">
    <a class="btn btn-delete " href="# ">
    <i class="fa fa-times " aria-hidden="true "></i>
    </a>
    </div>
    </span>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用jQuery查找。

https://api.jquery.com/find/

示例：$（'。item-box item-box-active'）。find（）

Answer 3

            <div class="area-bounding-box" style="margin-top: 87.5px;">
            <div class="item-box item-box-active item-box-editing" data-uuid="9fbc2435-d87d-418f-83fa-580c3841955a" style="top: 4.47%; left: 11.57%; width: 18.42%; height: 39.42%;"><span class="icon-resize icon-resize-tl">
            </span><span class="icon-resize icon-resize-br"></span>
            <span class="icon-resize icon-resize-tr"></span>
            <span class="icon-resize icon-resize-bl"></span>
            <span class="icon-resize icon-resize-t"></span>
            <span class="icon-resize icon-resize-b"></span>
            <span class="icon-resize icon-resize-l"></span>
            <span class="icon-resize icon-resize-r"></span>
            <div class="area-move"></div><div class="area-btns">
            <a class="btn btn-delete" href="#">
            <i class="fa fa-times" aria-hidden="true">
            </i>
            </a>
            </div>
            </div>
            <div class="item-box item-box-active" data-uuid="78b14a5a-49b9-419d-9a90-fea9312b8029" style="top: 8.85%; left: 34.14%; width: 24.42%; height: 53.52%;">
    <span class="icon-resize icon-resize-tl">
            </span>
    <span class="icon-resize icon-resize-br">
            </span>
    <span class="icon-resize icon-resize-tr">
            </span>
    <span class="icon-resize icon-resize-bl">
            </span>
    <span class="icon-resize icon-resize-t">
            </span>
    <span class="icon-resize icon-resize-b">
            </span>
    <span class="icon-resize icon-resize-l">
            </span>
    <span class="icon-resize icon-resize-r">
            </span>
            <div class="area-move"></div>
            <div class="area-btns">
            <a class="btn btn-delete" href="#">
            <i class="fa fa-times" aria-hidden="true">
            </i>
            </a>
            </div>
            </div>
            <div class="item-box item-box-active item-box-editing" data-uuid="7c143202-b7db-4515-9be0-c60be4249bd6" style="top: 17.42%; left: 72.28%; width: 21%; height: 45.71%;">
            <span class="icon-resize icon-resize-tl">
        </span>
            <span class="icon-resize icon-resize-br">
        </span>
            <span class="icon-resize icon-resize-tr">
            </span>
            <span class="icon-resize icon-resize-bl">
            </span>
            <span class="icon-resize icon-resize-t">
            </span>
            <span class="icon-resize icon-resize-b">
            </span>
            <span class="icon-resize icon-resize-l">
            </span>
            <span class="icon-resize icon-resize-r">
            </span>
            <div class="area-move"></div>
            <div class="area-btns">
            <a class="btn btn-delete" href="#">
            <i class="fa fa-times" aria-hidden="true">
            </i>
            </a>
            </div>
            </div>
            </div>
(function() {
    'use strict';
    $("body").prepend ( `
<button id="btCount">Box Count</button>
<button id="btReset">Reset</button>
<div></div>`);

    var arr = [];
    var boxCount;
    var sum;
    var elementarray;
    var nodeList;


    document.getElementById("btCount").onclick = function() { funAlert();};

    $('#btnNext').click( function(){
        next();
    });


    $('#btnSkip').click( function(){
        skip();
    });


    $('#btnPrev').click( function(){
        prev();
    });


    $('#btnSubmit').click( function(){
        funAlert();
    });

    function next(){

        var elementarray = $(".item-box.item-box-active").length;
        console.log("length", elementarray);
        if (elementarray === 0) {
            $(".btCount").html("5");
        } else {
            $(".btCount").html("2");
        }
        arr.push(elementarray);
        console.log(arr);
    }

Answer 4

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area-bounding-box" style="margin-top: 87.5px;">
  <img src="s3.-9278-494d-bfe5-e174e762089c.jpg" style="visibility: visible;">
  <div class="item-box item-box-active item-box-editing" data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c" style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%;">
    <span class="icon-resize icon-resize-tl"></span>
    <div class="area-move"></div>
    <div class="area-btns">
      <a class="btn btn-delete" href="#">
        <i class="fa fa-times" aria-hidden="true">
         </i>
      </a>
    </div>
    <div class="item-box item-box-active item-box-editing" data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9" style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%;">
      <span class="icon-resize icon-resize-tl">
         <div class="area-move"></div>
         <div class="area-btns"><a class="btn btn-delete" href="#">
            <i class="fa fa-times" aria-hidden="true">
            </i>
            </a>
         </div>
      </div>
   </div>
</div>

<div class="btnCount">
</div>

＆＃13;

{{1}}

＆＃13;

如何查找名称为“item-box item-box-active”的课程？

4 个答案: