javascript - 运行 querySelectorAll() 时 NodeList 始终为空

Question

我有一个 html View ，我用 ajax 调用中的 json 数据填充该 View 。我正在尝试运行我的函数 pageCtrl()，但每次运行它时我总是得到一个空的 NodeList。

这可能是由于我的 ajax 完成之前运行的 pageCtrl() 函数引起的吗？

Javascript

<script>
    var Utils = {
        escapeHtml: function _escapeHtml(s) { // Prevent code injection and rendering issues
            return String(s).replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;');
        }
    };

    function Panel(opts) {
        var theDiv = document.getElementsByClassName('res-' + opts.classcontrol);
        var theArray = [
            '<div class="panel">',
            '  <div class="panel-heading">',
            '    <h4>',
            '     <span class="status"><b class="fa fa-', opts.icon, '"></b></span>',
            '     <span class="name">', Utils.escapeHtml(opts.title), '</span>',
            '    </h4>',
            '  </div>',
            '  <div class="panel-body">',
            (opts.trustedBody || Utils.escapeHtml(opts.body)),
            '  </div>',
            '</div></div>'
        ];
        if (theDiv.length == 0) {
            theArray.splice(0,
                0,
                '<div class="res-',
                opts.classcontrol,
                '"><h1>Machine: ',
                opts.classcontrol,
                '</h1>');
            theArray.push("</div>");
        }

        return theArray.join('');
    }

    function ConfigurationController(element) {
        if (!element) {
            throw new Error('Cannot create ConfigurationController: Element Required');
        }
        var self = this,
            apiUrl = "http://api.mydomain.com/api/ShopViewDisplay/" + "@ViewBag.pathProc";

        // Expose Public method(s)
        this.load = load;
        //this.render = render;

        function load() {
            // Attempt ajax call; on fail: use dummy data
            reset();
            $.ajax({
                url: apiUrl,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    data.map(renderItem,
                        function(el) {
                            if (el != undefined) {
                                element.append(el);
                            }
                        });
                },
                error: function(request, error) {
                    alert("Request: " + JSON.stringify(request) + " Error: " + error);
                }
            });

        }

        function reset() {
            element.children().remove();
            return element;
        }

        function renderItem(obj) {
            var callback = typeof this === 'function' ? this : false;

            var statusIcon = "fire";
            var itemPanel = Panel({
                icon: statusIcon,
                title: obj.WorkOrderNumber,
                classcontrol: obj.PressNo,
                trustedBody: [
                    '    <div class="PressNo"><b></b> Machine:  <br>', Utils.escapeHtml(obj.PressNo), '</br></div>',
                    '    <br>                                                                   ',
                    '    <div class="Priority"><b></b> Priority:  <br>', Utils.escapeHtml(obj.Priority),
                    '</br></div>',
                    '    <br>                                                                   ',
                    '    <div class="PartNo"><b></b> Part:  <br>', Utils.escapeHtml(obj.Part), '</br></div>',
                    '    <br>                                                                   ',
                    '    <div class="Material"><b></b> Material: <br>', Utils.escapeHtml(obj.PartDesc),
                    '</br></div>',
                    '    <br>                                                                   ',
                    '    <div class="Setup"><b></b> Setup(E/A): <br>',
                    Utils.escapeHtml(obj.EstActSetupHrs).replace('\r\n', ' / '), '</br></div>',
                    '    <br>                                                                   ',
                    '    <div class="Run"><b></b> Run (E/A): <br>',
                    Utils.escapeHtml(obj.EstActRunHrs).replace('\r\n', ' / '), '</br></div>',
                    '    <br>                                                                   ',
                    '    <div class="Qty"><b></b> Qty: <br>',
                    Utils.escapeHtml(obj.CalEndCompleteQty).replace('\r\n', ' / '), ' </br></div>'
                ].join('\n')
            });

            itemPanel = $(itemPanel);
            var jj = ".res-";
            jj += obj.PressNo;
            var theDiv = $(jj);
            if (theDiv.length == 0) {
                return (typeof(callback) === 'function' ? callback(itemPanel) : itemPanel);
            } else {
                theDiv.append(itemPanel);
                return undefined;
            }

        }
    }


    function pageCtrl()
    {

        var elements = document.querySelectorAll('[class^=res-]');
        console.log(elements);
        var active = 0;
        setInterval(()=>{
            if( ++active >= elements.length) active = 0;

            //poor support for options
            elements[active].scrollIntoView({
                behavior:'smooth',
                block:'start' //Where to align current item: 'start', 'end' or 'center'
            })
        },5000)
    }

    $(document).ready(function _onLoad() {
        new ConfigurationController($('.configurationList')).load();
        //setInterval(ctrl.load(), 60000);
        pageCtrl();
    });




</script>

HTML

<div class="configurationList">
  <div class="res-1">
    scroll to me then pause for 5 seconds next move to res-2
  </div>

  <div class="res-2">
    scroll to me then pause for 5 seconds next move to res-8-5
  </div>

  <div class="res-8-5">
    scroll to me then pause for 5 seconds next move to top and repeat 
  </div>
</div>

错误屏幕截图

Answer 1

从成功回调函数中调用 pageCtrl() 函数，以便在构建 DOM 之前 pageCtrl() 中定义的逻辑可以与

$.ajax({
  url: apiUrl,
  type: "GET",
  dataType: "json",
  success: function(data) {
    data.map(renderItem, function(el) {
      if (el != undefined) {
        element.append(el);
      }
    });

    pageCtrl(); 
  },
  error: function(request, error) {
    alert("Request: " + JSON.stringify(request) + " Error: " + error);
  }
});