javascript - 在可滚动 div 的可见区域中查找所有输入元素

Question

我有一个固定大小的可滚动 div，其中有 500 行。每行有 6 列输入、文本区域、选择元素。

我不想选择所有输入元素，而是想找到当前在屏幕上可见的所有输入元素(即 div 视口(viewport)中的输入元素)。

例如。如果我在 item 320 上，我最多可以看到 350 个元素，我只需要选择那个范围内的 input 元素

这是滚动框中 1 行的 trim 版本:

<tbody>
    <tr>
        <td>
            <input id="prm_1_1_1_100" type="checkbox" value="" name="checkbox" style="display: none;">
        </td>
        <td>
            <span id="dsp_1_1_2_2"></span>
        </td>
        <td>
            <input id="dsp_1_1_1_5" type="text" value="" maxlength="16" minlength="16" required="true" data-allow="alphanumeric">
        </td>
        <td>
            <input id="dsp_1_1_1_6" type="text" value="" maxlength="500" required="true">
        </td>
        <td>
            <input id="dsp_1_1_1_7" type="text" value="" required="true" data-max-date="today" data-toggle="datepicker" class="hasDatepicker">
        </td>
        <td>
            <input id="dsp_1_1_1_8" type="text" value="" maxlength="20" data-allow="toFixedDecimal">
        </td>
        <td>
            <input id="dsp_1_1_1_9" type="text" value="" data-allow="toFixedDecimal">
        </td>
        <td>
            <textarea id="dsp_1_1_1_22" rows="1" cols="20" required="true" onkeyup="javascript: getVals(this, 'textarea');"></textarea>
        </td>
        <td>
            <select id="dsp_1_1_1_23">
                <option value="RLB" selected="selected">RLB</option>
                <option value="CLB">CLB</option>
            </select>
        </td>
        <td>
            <select id="dsp_1_1_1_14" disabled="disabled">
                <option value="Open" selected="selected">Open</option>
                <option value="Drop">Drop</option>
                <option value="MAP">MAP</option>
                <option value="Carry Over"> Carry Over</option>
            </select>
        </td>
        <td>
            <input id="dsp_1_1_1_15" type="text" value="" disabled="disabled" class="width-80">
        </td>
        <td>
            <input id="dsp_1_1_1_16" type="text" value="" disabled="disabled" class="width-80">
        </td>
    </tr>
</tbody>

Answer 1

您可以通过相对于每一行顶部位置的 scrollTop 位置进行过滤:

function getElements ($scroll) {
    var viewportStart = $scroll.scrollTop();
    var viewportEnd = viewportStart + $scroll.height();

    return $scroll.find('tr, .row').filter(function() {
        var $row = $(this);
        var rowTop = $row.position().top;
        return rowTop >= viewportStart && rowTop <= viewportEnd;
    });
};

var $container = $('div.scroll');    // $('table')

getElements($container).css('backgroundColor', '#00f');