通过jQuery在最后一项之后插入
Insert After Last Item by jQuery
这是我所有的脚本,我知道这很长,但只有一行很重要,为了保险,我添加了所有内容:
//Add new Addable div
$('.AddNewE').click(function () {
var RemoveAddableButton = $('<input type="button" class="RemoveE button red" value="remove" />');
$(RemoveAddableButton).click(function () {
$(this).closest('.Addable').remove();
});
var TargetId = $(this).attr('id');
TargetId = TargetId.substring(3);
var Target = $('.Addable#' + TargetId + ':first');
var Count = $('.Addable#' + TargetId).size();
var CloneTarget = $(Target).clone();
CloneTarget.find('input').val('');
CloneTarget.insertAfter('.Addable#' + TargetId + ':last'); // ***importantOne
var TargetName = $(Target).find('input').attr('name');
if (Count == 1) {
var CloneName = TargetName + '[1]';
TargetName = TargetName + '[0]';
$(Target).find('input').attr('name', TargetName);
$(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName);
$(CloneTarget).find('input').attr('name', CloneName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneName + '"></span>')
);
}
} else {
var indx = TargetName.length - 3;
var CloneTargetName = TargetName.substring(0, indx);
CloneTargetName = CloneTargetName + '[' + Count + ']';
$(CloneTarget).find('input').attr('name', CloneTargetName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneTargetName + '"></span>')
);
}
}
(function ($) {
$.fn.updateValidation = function () {
var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
return this;
};
})(jQuery);
$(Target).updateValidation();
$(CloneTarget).updateValidation();
});
如果我单击.AddNewE
按钮,则会添加一个新div
,但作为我的脚本,我想将此新div
添加到divs
的末尾,所以我使用
CloneTarget.insertAfter('.Addable#' + TargetId + ':last');
但总是将新div
添加为第二个div
这意味着:first
和:last
div 始终是相同的,并且是我检查的第一个:
$('.Addable#' + TargetId).css('border', '');
$('.Addable#' + TargetId + ':last').css('border', '3px dotted green');
$('.Addable#' + TargetId + ':first').css('border', '3px dotted red');
那么问题出在哪里呢?为什么jQuery无法识别最后div
?
问题出在 jQuery 选择器中: $('.可添加#' + 目标 ID + ':last')
当您有多个具有相同 id (#TargetId) 的元素时,它不是有效的 HTML。ID 是唯一的,您不应该有超过 1 个具有相同 ID 的元素。
jQuery 选择器假定您使用有效的正确 HTML 标记,因此它不会费心收集具有该 ID 的所有元素。一旦 jQuery 在 DOM 中找到第一个具有该 ID 的元素,它就会停止并立即附加您的新元素。
尝试将 jQuery 选择器更新为:$('。Addable:first') 和 $('.可添加:最后'),看看它是否有效。
相关文章:
- 如何从对象数组中获取最后一项
- 为什么只有最后一项显示,而不是全部显示
- jQuery单击事件在一次之后不会触发
- 删除最后一项jquery
- $q.all当输入数组中的一项不是promise时,Typescript检查器失败
- 为什么我的“for”循环只获取 html 中的最后一项
- 我无法将下拉列表的默认值设置为最后一项
- 流星批量插入仅插入最后一项
- 我怎么能知道元素是最后一项
- 如何删除WinJS组绑定列表的最后一项
- 在immutable.js中更改列表中的一项
- 使用handlers.js模板以数组中的最后一项为条件
- empty().append()追加循环中的最后一项
- jQuery只附加最后一项
- 将属性添加到 for 循环中的最后一项
- 我的应用仅显示一项检索到的数据
- 如何在 visjs 时间轴中按时间顺序获取 getVisibleItems(或如何获取上一项)
- 滑动视图 - 显示下一项的预览/片段
- 检查单词是否具有相同的字母 - 错过一项测试
- 通过jQuery在最后一项之后插入