如何解决用.each调整大小的jQuery ui仅对第一个孩子有效
这是带有“ n”号的初始html。具有相同类名的子元素的集合。
<div class="reading-content">
<div class="c-resourceitem-content">
<div data-id="1" class="resource"></div>
<div class="btn" id="btn"></div>
</div>
<div class="c-resourceitem-content">
<div data-id="2" class="resource"></div>
<div class="btn" id="btn"></div>
</div>
<div class="c-resourceitem-content">
<div data-id="3" class="resource"></div>
<div class="btn" id="btn"></div>
</div></div>`
Javascript:将div作为处理程序追加,以垂直调整元素的大小
$('.reading-content').children('.c-resourceitem-content').each(function eachFn() {
$(this).children().wrapAll("<div class='resourceitem-content-wrap'></div>");
var id = $(this).children("resource").attr('id');
ResourceSplitter = $('<label class="resource-splitter ">'+'</label>').attr("id","id_" + id);
$( ResourceSplitter).appendTo($(this));
$(this).resizable({
handles: { 's' : '.resource-splitter' }
});
});
最终的HTML代码段如下所示:通过包装所有子div并附加一个处理程序以根据需要进行调整大小。
<div class="reading-content">
<div class="c-resourceitem-content">
<div class="resourceitem-content-wrap">
<div data-id="1" class="resource"></div>
<div class="btn" id="btn"></div>
</div>
<label class="resource-splitter" id="id_1"></label>
</div>
</div>
但是问题在于,仅在.each()函数中具有类'c-resourceitem-content'的第一个子元素时才发生大小调整。
请帮我解决一个问题,以便通过使用附加到每个div的处理程序来调整所有子类的大小。
CSS:
.resourceitem-content-wrap{
overflow-y:auto;
overflow-x: hidden;
width:100%;
height:100%;
}
.resource-splitter{
background:#ccc;
height:5px;
border-left:none;
display:block;
flex: 0 0 auto;
cursor: row-resize;
z-index: 80;
}
.reading-content {
height:auto;
margin-top: 15px;
margin-right: 15px;
}
解决方法
如果未定义应用于resource-splitter
的ID,则该代码将不包含在内。在.each函数上使用索引值将不需要此代码:
var id = $(this).children("resource").attr('id');
索引将枚举每个c-resourceitem-content,我添加了一个从1开始的id变量。如下所示:
$(".reading-content")
.children(".c-resourceitem-content")
.each(function eachFn(index) {
let id = index + 1;
$(this)
.children()
.wrapAll("<div class='resourceitem-content-wrap'></div>");
ResourceSplitter = $(
'<label class="resource-splitter ">' + "</label>"
).attr("id","id_" + id);
$(ResourceSplitter).appendTo($(this));
$(this).resizable({
handles: { 's': ".resource-splitter" }
});
});
您是否能够提供适用于html的样式,以便我可以对其进行进一步测试?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。