Jquery UI Position 的问题：目标在窗口中的位置很重要？

Posted 2023-05-09

【中文标题】Jquery UI Position 的问题：目标在窗口中的位置很重要？

【英文标题】：Problem with Jquery UI Position: target's position in the window matters?

【发布时间】：2021-04-30 16:49:59

【问题描述】：

使用 DataTables + UI Position。目标是在每个 DataTable 行的顶部放置一个工具栏（将单元格内容向下填充以腾出空间。）我在“绘制”事件上创建工具栏，将其附加到行中的第一个单元格，然后将其定位在行的左上角。它适用于第一行，但不适用于后续行 - 除非我向下滚动以便在绘制工具栏时每一行都在屏幕上可见。

澄清：工具栏是用正确的信息在正确的行中绘制的，除非它们的行在视口中，否则它们没有被放置在我想要的位置。

    // create an array of reference objects for the toolbars
    var aReviews = [];
    $("tbody tr[role=row] div.place-review").each(function () 
        aReviews.push($(this));
    )
    var safetyCounter = 0; // if there's a problem, don't just run forever
    // run in an interval so I can scoll along and watch the toolbars draw
    var reviewInterval = setInterval(() => 
        if (aReviews.length == 0 || safetyCounter == 50) 
            // we've done what there is to do or there's an issue.
            // in any case, quit.
            clearInterval(reviewInterval);
            return;
        
        // get the first reference objects in the array
        const C = $(aReviews[0]);
        // get the stuff to display in the toolbar
        const data = dashboard.getColumnData($, C);
        const idapp = data.idapp;
        const iddeal = data.iddeal;
        const e = $(`<div class='review-interview-bar'>Hello World $idapp $iddeal</div>`);
        // append the toolbar to the cell
        C.closest('td').append(e);
        // put my toolbar at the top of the cell 
        e.position( my: 'left top', at: 'left top', of: C.closest('td') );
        // remove the reference class so we don't draw more than once.
        C.removeClass("place-review");
        // take the current item off the list
        aReviews.shift();
        safetyCounter++;
    , 2000);

显然我不能要求我的用户向下滚动以让工具栏正确加载。如何将工具栏放在需要的位置？如果需要的话，我可以在行滚动到视图中时将工具栏移动到位，但是我如何检测到滚动到视图中的行？

【问题讨论】：

看起来您一次只将其应用于 1 个项目：const C = $(aReviews[0]); 所以它只会对一个项目执行此操作，然后当 draw 事件再次发生时，它将重做此操作，但元素可能不同。我怀疑您想将此应用于每一行，而不仅仅是 1 行。

它被应用到每一行。请参阅下面的评论。

【参考方案1】：

考虑以下内容。

$(function() 
  // create a jQuery Object of the Table Body Rows
  var aReviews = $("tbody tr[role=row]");

  // Function to add the Toolbar to a Target (Row)
  // Data Input, and Target to append to
  function addItem(d, t) 
    var idapp = d.idapp;
    var iddeal = d.iddeal;
    var e = $("<div>", 
      class: "review-interview-bar"
    ).html("Hello World. " + idapp + ", " + iddeal).appendTo(t);
    e.position(
      my: 'left top',
      at: 'left top',
      of: t
    );
    t.closests("tr").find(".place-review").removeClass("place-review");
  

  // Iterate each row
  aReviews.each(function(i, row) 
    // Check for place-review class inside the Row
    if ($(".place-review", row).length) 
      // Wait 2 seconds. then add the toolbar
      setTimeout(function() 
        addItem(dashboard.getColumnData($, $(".place-review", row)), $("td:first", row));
      , 2000);
    
    // Move on to next row
  );
);

查看更多：

https://api.jquery.com/each/

.each() 方法旨在使 DOM 循环结构简洁且不易出错。当被调用时，它会遍历作为 jQuery 对象一部分的 DOM 元素。每次回调运行时，都会传递当前循环迭代，从 0 开始。更重要的是，回调是在当前 DOM 元素的上下文中触发的，所以关键字 this 是指该元素。

当循环运行时，您将每次使用.position() 和一个唯一的目标。你可能需要.offset()，很难说。如果您需要更多帮助，您必须提供Minimal, Reproducible Example。

【讨论】：

我从一个 EACH 循环开始，几乎完成了你上面写的。它有同样的问题。我切换到阵列，这样我就可以放慢进程并观察它的发生，正如它在我的 cmets 中所说的那样。