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

Posted 2023-03-16

【中文标题】使用 .each() 可调整大小的 jquery ui 仅适用于第一个孩子

【英文标题】：jquery ui resizable with .each() works only on first child

【发布时间】：2020-12-08 01:25:12

【问题描述】：

这是最初的 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;
 

【参考方案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 的样式以便我进一步测试？

【讨论】：

已添加样式部分。并且用于具有“资源”类的 div 的“id”是随机的（即）“id”不是连续数字（变化如 201,300 等）。那么，您能否为这种情况提供解决方案。 @JakeBraemer