Блог

Это исходный 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 выглядит следующим образом путем переноса всех дочерних элементов 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>
  

Но проблема в том, что изменение размера происходит только для первого дочернего элемента с классом ‘c-resourceitem-content’ внутри функции .each().

Пожалуйста, помогите мне с решением, позволяющим изменять размер всех дочерних классов с помощью обработчика, добавляемого к каждому 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 , не определен. Используя значение индекса в .каждая функция устранит необходимость в этом коде:

 var id = $(this).children("resource").attr('id');
  

Индекс будет перечисляться по каждому c-resourceitem-контенту, я добавил переменную id, которая начинается с 1. Как показано ниже:

 $(".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, чтобы я мог протестировать его дальше?