Javascript 每个循环一次一个

我有一个遍历特定类（.casebox）的each循环。它检查其他类，并通过.load（）更改标题和加载特定内容

HTML

<div id="mainbody">
 <div class="halfbox">
                    <h4 class="box casetitle"></h4>
                    <div class="caseloader loader"><img src="<?php echo $url_resources_images; ?>ajax-loader.gif" alt="Loading..." /><br /><p>Please be patient, loading cases...</p></div>
                    <div class="casebox dashbox"></div>
                </div>
                <div class="halfbox">
                    <h4 class="box casetitle"></h4>
                    <div class="caseloader loader"><img src="<?php echo $url_resources_images; ?>ajax-loader.gif" alt="Loading..." /><br /><p>Please be patient, loading cases...</p></div>
                    <div class="casebox dashbox apending"></div>
                </div>

但是，它似乎运行速度很快，当它进入第二个循环时，它似乎覆盖了第一次运行时所做的设置。第一次运行没有.hasClass的匹配结果，其标题由函数getURLS（）设置。然而，当第二个循环通过时，它会覆盖第一个框中设置的内容，并将标题设置为“我分配的案例（待定关闭）”，即使只有第二个框具有此类。最重要的是，第一个框加载正确的内容，但加载条不会消失，但第二个框上的加载条会消失

---

关于如何确保它坚持下去有什么想法吗？这可能不是很清楚，但希望通过上面的代码，它将有助于解释。谢谢。

我不确定boxType、orgGet是从哪里来的。。。但我认为问题在于，当您声明$（'.casetTitle'）之类的东西时，它实际上会在整个文档中重新搜索这些类

尝试以下方法：

function loadCases(){
    $(".casebox").each(function(){
        getURLs();
        boxType();
        console.log('activated');

        //parent halfbox - only get the first parent
        var parent = $(this).parent('.halfbox');
        parent.css('background', 'blue');

        //seems that you try to get the casetitle all the time
        //find the element with the class casetitle, which is inside the parent
        var ct = parent.find('.casetitle');

        //BOXOVERIDE - FOR WHEN THE URL CAN'T BE SET E.G. DASHBOARD

        if($(this).hasClass("allopen")){
            //change the html inside the h4
            ct.html('All Open Cases');
            caseGET = "&casetype=allopen";
        } else if($(this).hasClass("copen")){
            ct.html('My Created Cases (Open)');
            caseGET = "&casetype=copen";
        } else if($(this).hasClass("aopen")){
            ct.html('My Assigned Cases (Open)');
            caseGET = "&casetype=aopen";
        } else if($(this).hasClass("allclosed")){
            ct.html('All Closed Cases');
            caseGET = "&casetype=allclosed";
        } else if($(this).hasClass("cclosed")){
            ct.html('My Created Cases (Closed)');
            caseGET = "&casetype=cclosed";
        } else if($(this).hasClass("aclosed")){
            ct.html('My Assigned Cases (Closed)');
            caseGET = "&casetype=aclosed";
        } else if($(this).hasClass("apending")){
            ct.html('My Assigned Cases (Pending Close)');
            caseGET = "&casetype=apending";
        }
        console.log(caseGET);

        $(this).load("boxes/cases.php?boxtype=" + boxtype + caseGET + orgGET, function (){
            parent.find('.caseloader').hide();
        });
    });
};

---

那个代码很难读懂。。。你考虑过查字典吗？基本上，您可以创建一个包含所有不同情况的对象，并为每个情况分配一个函数，然后根据字典查找当前类。它将显著提高代码的可读性，也可能提高代码的大小。虽然在这种情况下，您可能只需要使用类作为键、文本作为值的对象就可以了。第二个循环是什么意思？如果

试图在布尔值上使用
find
，也要首先调用
。为什么每次都要在循环中调用
getURL（）
和
boxtype（）
。@elclars这是我的计划，但在我开始之前，需要在同一页上的多个框中使用可能不同的类对其进行测试，我还有几点要补充。charlietfl remove，本来不应该在那里的，复制/粘贴错误。@jfriend00由于每个框可能不同，第一个框使用默认值获取其内容，但第二个框使用类手动设置。奇妙的@Greg我必须为您找出该代码而感到额外的荣誉：）
function loadCases(){
    $(".casebox").each(function(){
        getURLs();
        boxType();
        console.log('activated');

        //parent halfbox - only get the first parent
        var parent = $(this).parent('.halfbox');
        parent.css('background', 'blue');

        //seems that you try to get the casetitle all the time
        //find the element with the class casetitle, which is inside the parent
        var ct = parent.find('.casetitle');

        //BOXOVERIDE - FOR WHEN THE URL CAN'T BE SET E.G. DASHBOARD

        if($(this).hasClass("allopen")){
            //change the html inside the h4
            ct.html('All Open Cases');
            caseGET = "&casetype=allopen";
        } else if($(this).hasClass("copen")){
            ct.html('My Created Cases (Open)');
            caseGET = "&casetype=copen";
        } else if($(this).hasClass("aopen")){
            ct.html('My Assigned Cases (Open)');
            caseGET = "&casetype=aopen";
        } else if($(this).hasClass("allclosed")){
            ct.html('All Closed Cases');
            caseGET = "&casetype=allclosed";
        } else if($(this).hasClass("cclosed")){
            ct.html('My Created Cases (Closed)');
            caseGET = "&casetype=cclosed";
        } else if($(this).hasClass("aclosed")){
            ct.html('My Assigned Cases (Closed)');
            caseGET = "&casetype=aclosed";
        } else if($(this).hasClass("apending")){
            ct.html('My Assigned Cases (Pending Close)');
            caseGET = "&casetype=apending";
        }
        console.log(caseGET);

        $(this).load("boxes/cases.php?boxtype=" + boxtype + caseGET + orgGET, function (){
            parent.find('.caseloader').hide();
        });
    });
};