用.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的样式，以便我可以对其进行进一步测试？