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