gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:22:41 25 4
gpt4 key购买 nike

我有一个固定大小的可滚动 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>

最佳答案

您可以通过相对于每一行顶部位置的 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');

关于javascript - 在可滚动 div 的可见区域中查找所有输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41612788/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com