jquery ui с изменяемым размером с .each() работает только с первым дочерним элементом

Это начальный 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;
 }

html jquery each jquery-ui-resizable
person user0511    schedule 18.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Замечено с кодом, если идентификатор, примененный к resource-splitter, не определен. Использование значения индекса в функции .each устранит необходимость в этом коде:

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

Индекс будет перечислять каждый c-resourceitem-content, я добавил переменную 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, чтобы я мог проверить его дальше?

person Jake B.    schedule 19.08.2020
comment
Добавили стайлинговую часть. И «id», используемый для div с классом «resource», является случайным (т.е.) «id» не является последовательным числом (варьируется, например, 201 300 и т. д.). Итак, не могли бы вы дать решение для этого случая. @ДжейкБрамер - person user0511; 19.08.2020