Question

我有一个函数，它执行ajax发布以从DB中删除行，并且在ajax成功之后它将隐藏实际元素。

以下是我遇到的问题：

假设我的页面上有5个元素。在成功的$ .post（）之后它隐藏了一个元素，现在页面上有4个元素。现在当我点击类.delete_items的删除链接时，它仍然在控制台日志中返回5个元素作为.length而不是4。无论我点击删除按钮多少次，它都会继续返回5。

我几次完成了我的代码，但我似乎无法找出它返回相同数字的原因。

任何帮助都会非常感激。以下是我的代码

    var menuType = "baseMenu"; //Set global var

    function countElements(ajax_item_key, ajax_item_val, item_input_class, ajax_cat_key, cat_id){


            //This deletes the item only

            o[ajax_item_key] = ajax_item_val;


              /* @var count_all_item_inputs
Count all the input fields that has that has a class name of the passed param
              item_input_class. Filter the selection with by choosing only the classes with the passed in cat_id

             Example of an actual HTML item_input :
             <input class="menu_item_input 2704" type="text" value="Test" name="items_and_prices[21518][]"> */

            var count_all_item_inputs = $(item_input_class+'[class*="'+cat_id+'"]').length;
            console.log(count_all_item_inputs); // This keep returning the same value??

            //This deletes item and category if there was one input left to be deleted
            if(count_all_item_inputs == 1) {
                o[ajax_cat_key] = ajax_cat_val;
                 var hide_category = true;
                return hide_category;
            }



    }

    $(.delete_item).on("click",   function(){

            if(menuType === "baseMenu") {

                /*
                @baseMenuId - key to send at the ajax post
                @id - value defined in my script didn't include it on this example to make things simple
                @.menu_item_input input class to pass in so that it will count how many inputs are left after a successful jquery post
                @deleteAllFromBaseMenu - Another jquery key to  send if a condition is met inside the countElement function
                @cat_id - The category id to send alongside with the deleteAllFromBaseMenu
               */

                var hide_category = countElements("baseMenuId", id, ".menu_item_input","deleteAllFromBaseMenu", cat_id);

    });

     $.post("../../include/functions/menuDisplay/MenuCrud/menuDelete.php", o)

                .fail(function(){
                    //console.log("deletion failed");
                })

                .done(function(){
                    $("div#"+id).hide();
                   if(hide_category == true){
                       $("div#"+cat_id).hide();
                   }
                });

                return false;
        } else {
            return false;
        }

Answer 1

您正在计算与选择器匹配的所有元素，即使您正在隐藏元素，但您还没有将其删除，因此他们仍然计算总数。您可以通过添加过滤器:visible来修改选择器，以仅获取可见元素。

例如，拥有以下html，如果我们使用选择器$("div:visible")，我们将只获得第二个div，而如果我们只使用$("div")，我们将同时定位两个。

<div style='display:none'>A</div>
<div>B</div>

注意要使:visible过滤器按预期工作，元素需要在文档中占用一些空间，换句话说，如果它是空的，即使不是必然隐藏，它不会计数。

Answer 2

如果您选中$('*').length，请使用.remove()代替.hide()，然后检查$('*').length并执行简单的数学运算，我认为您已经得到了它，除非有其他我没注意到的问题。

jQuery返回相同数量的元素已被删除

2 个答案: