使用 JQuery 选择嵌套 Div 中的元素
Select Elements in nested Divs using JQuery
我在一个名为 item
的 Div 中有以下 html 标记,我想选择所有元素(在嵌套的div 内)并清除值。如以下给定的 Jquery 所示,我设法通过使用 .children().each()
访问每个 Div 中的元素。但问题是.children().each()
从父div 一次下降一级,所以我用多个.children()
重复了相同的代码块来访问嵌套 Divs 中的元素,任何人都可以向我建议一种方法来做到这一点,而无需重复 N 个嵌套div 的代码。
HTML 标记
<div class="item">
<input type="hidden" value="1234" name="testVal">
<div class="form-group" id="c1">
<div class="controls ">
<input type="text" value="Results" name="s1" maxlength="255" id="id2">
</div>
</div>
<div class="form-group" id="id4">
<input type="text" value="Results" name="s12" maxlength="255" id="id225">
<div class="form-group" id="id41">
<input type="text" value="Results" name="s12" maxlength="255" id="5">
<div class="form-group" id="id42">
<input type="text" value="Results" name="s12" maxlength="255" id="5">
<div class="form-group" id="id43">
<input type="text" value="Results" name="s12" maxlength="255" id="id224">
</div>
</div>
</div>
</div>
</div>
我的 Qjuery 脚本
var row = $(".item:first").clone(false).get(0);
$(row).children().each(function () {
updateElementIndex(this, prefix, formCount);
if ($(this).attr('type') == 'text') {
$(this).val('');
}
if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) {
$(this).val('');
}
if ($(this).attr('type') == 'file') {
$(this).val('');
}
if ($(this).attr('type') == 'checkbox') {
$(this).attr('checked', false);
}
$(this).remove('a');
});
// Relabel or rename all the relevant bits
$(row).children().children().each(function () {
updateElementIndex(this, prefix, formCount)
if ($(this).attr('type') == 'text') {
$(this).val('');
}
if ($(this).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) {
$(this).val('');
}
if ($(this).attr('type') == 'file') {
$(this).val('');
}
if ($(this).attr('type') == 'checkbox') {
$(this).attr('checked', false);
}
$(this).remove('a');
});
似乎这样的事情就可以了。当然,您更具体地选择哪个项目。
$('.item').find('input').val('');
尝试
var row = $(".item:first").clone(false).get(0);
$(row).find('input:not(:checkbox)').val('');
$(row).find('input:checkbox').prop('checked', false);
您可以使用 find 而不是子项,它将一直向下遍历 dom。
$(row).find('input').each(function () {
试试这个
var row = $(".item:first").clone(false).get(0);
$(row).children().each(function () {
var $this=$(this);
clearelements($this);
if(element.children().length > 0)
{
element.children().each(function(){
recursive(this)
clearelements(this);
});
}
});
function recursive(element)
{
if(element.children().length > 0)
{
element.children().each(function(){
clearelements(this);
});
}
}
function clearelements(obj){
if ($(obj).attr('type') == 'text') {
$(obj).val('');
}
if ($(obj).attr('type') == 'hidden' && ($(this).attr('name') != 'csrfmiddlewaretoken')) {
$(obj).val('');
}
if ($(obj).attr('type') == 'file') {
$(obj).val('');
}
if ($(obj).attr('type') == 'checkbox') {
$(obj).attr('checked', false);
}
$(obj).remove('a');
}
或者只是您可以一次访问它们
$(".item :input:not([name=csrfmiddlewaretoken]).val('');
$(".item :checkbox).prop('checked', false);
$(".item a").remove();
$(".item :input:not([name=csrfmiddlewaretoken])").val('');
$(".item :checkbox").prop("checked", false);
$(".item a").remove();
相关文章:
- 如何在不影响其他元素的情况下扩展DIV
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 循环对象时更新页面上的DIV元素
- 在DIV中动态插入HTML并访问新元素
- 单击javascript按钮显示/隐藏Div元素
- 如何确定滚动DIV中的可见DOM元素
- 范围和列表元素在 DIV 中换行
- Javascript 在提交时禁用 Div 元素
- 在 AJAX 调用中发送 DIV 元素的 ID
- 在具有特定ID的DIV中使用JavaScript动态添加HTML元素
- 使用JavaScript函数添加多个DIV元素
- 如果在Div元素外部单击,请关闭该元素
- 使用jQuery将列表中的元素集封装在DIV中
- 如何使用CSS3/JavaScript缩放DIV元素及其子元素以适应父元素
- 如何将SVG元素和Div放入图像中,以便用户可以下载
- 将DIV元素绑定到溢出滚动条
- 如何切换DIV元素的可见性
- jQuery - 将元素拖入 DIV / 或可排序元素
- Div在浏览器的检查元素中很暗,无法检索内容
- JavaScript/jQuery:如何获得元素(DIV)旋转后的实际原始位置