我想访问jquery中第二级的第一个$(this)

Question

我想获得二级上的数据属性

$('.filter-select').each(function() {
console.log($(this).data()) // this gives me all data 
$(this).on('change', function() {
console.log($(this).data()) // but here gives me only on that i clicked i want it all
})
})

Answer 1

不使用each，然后尝试将事件监听器附加到每个.filter-select元素，而是使用事件委派将监听器附加到父元素，以便它捕获来自所有.filter-select元素的更改事件；冒泡"；DOM。

$(document).on('change', '.filter-selector', handleChange);
function handleChange() {
console.log($(this).data());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select data-id="1" class="filter-selector">
<option selected>Choose (id: 1)</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select data-id="2" class="filter-selector">
<option selected>Choose (id: 2)</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

Answer 2

您可以简单地：

$('.filter-select').each(function() {
const allData = $(this).data();
$(this).on('change', function() {
// use allData to access all
})
})