使用 .each() 可调整大小的 jquery ui 仅适用于第一个孩子

Question

这是最初的 html，它有 'n' 号。具有相同类名的子元素。

<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 sn-p 看起来像这样，通过包装所有子 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;
 }

Answer 1

注意到代码提供了应用于 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 的样式以便我进一步测试？