返回相同数量元素的jQuery已被删除
jQuery returning the same number of elements has been deleted
下面有一个函数,它执行ajax post从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;
}
您正在计算与选择器匹配的所有元素,即使您隐藏了这些元素,也没有删除它,因此它们仍然占总数。您可以通过添加过滤器:visible
来修改选择器,以便只获取可见元素。
例如,对于下面的html,如果我们使用选择器$("div:visible")
,我们将只获得第二个div,而如果我们只使用$("div")
,我们将同时针对这两个div。
<div style='display:none'>A</div>
<div>B</div>
注意要使:visible
过滤器按预期工作,元素需要在文档中占用一些空间,换句话说,如果它是空的,即使不一定是隐藏的,它也不算数。
如果你检查$('*').length
,然后使用.remove()
而不是.hide()
,然后检查$('*').length
并预处理简单的数学,我想你已经得到了,除非还有其他我没有注意到的问题。
相关文章:
- Jquery删除图像
- 使用jquery删除输入框上的外部处理程序/库
- jQuery 2.1 |删除重复子字符串的源子字符串
- Javascript/JQuery删除代码中的父TR问题
- 使用jQuery删除动态创建的元素上的mouseenter事件
- Jquery删除上面的br标记
- Jquery-删除单选按钮
- JQuery.删除DOM树中的上一个同级
- 使用jQuery删除部分URL
- 使用jquery删除href中的特定字符或标记
- 使用jquery删除包含的行
- 如何使用Jquery删除伪元素
- Jquery删除除粗体之外的所有内容
- jquery .删除整个 li 或 table 元素后
- 使用JQuery删除禁用的属性
- Javascript/Jquery删除和添加'onmouseover'setinterval上的事件
- 如何使用jQuery删除具有一定效果的css类
- 使用jquery删除td类
- 使用jQuery删除两个类
- 如何使用jquery删除元素