Как перебрать только первый div JavaScript

Question

У меня есть следующий HTML,

<div class="col-lg-7 col-md-6 col-sm-6 text-left">
    <a href="javascript:;" class="multiSelect active" id="lbAssistingStaff" title="Evelyn Lupardus, Jamison Hennigan, Kajal Jain, Milud De Silvaa"><span style="width: 252px;">Evelyn Lupardus, Jamison Hennigan, Kajal Jain, Milud De Silvaa</span></a>
    <div class="multiSelectOptions" style="position: absolute; z-index: 99999; visibility: visible; height: 150px; width: 259px; top: 30px; left: 15px;">
        <label class="selectAll">
            <input type="checkbox" class="selectAll">Select All</label>
        <label class="">
            <input type="checkbox" name="lbAssistingStaff[]" value="10307">Dovie Segerson</label>
        <label class="checked">
            <input type="checkbox" name="lbAssistingStaff[]" value="14172">Kajal Jain</label>
        <label>
            <input type="checkbox" name="lbAssistingStaff[]" value="10354">Lydia Nikocevic</label>
        <label class="checked">
            <input type="checkbox" name="lbAssistingStaff[]" value="10355">Margo Mondloch</label>
    </div>
    <div class="multiSelectOptions" style="position: absolute; z-index: 99999; visibility: visible; height: 150px; width: 259px;">
        <label class="selectAll">
            <input type="checkbox" class="selectAll">Select All</label>
        <label>
            <input type="checkbox" name="lbAssistingStaff[]" value="10307">Dovie Segerson</label>
        <label class="checked">
            <input type="checkbox" name="lbAssistingStaff[]" value="14172">Kajal Jain</label>
    </div>
    <div class="multiSelectOptions" style="position: absolute; z-index: 99999; visibility: visible; width: 259px;">
        <label class="selectAll">
            <input type="checkbox" class="selectAll">Select All</label>
        <label class="checked">
            <input type="checkbox" name="lbAssistingStaff[]" value="14172">Kajal Jain</label>
        <label>
            <input type="checkbox" name="lbAssistingStaff[]" value="10062">Nevada Morison</label>
    </div>
    <div class="multiSelectOptions" style="position: absolute; z-index: 99999; visibility: visible; height: 150px; width: 412px;">
        <label class="selectAll">
            <input type="checkbox" class="selectAll">Select All</label>
        <label>
            <input type="checkbox" name="lbAssistingStaff[]" value="10259">Abel Schear</label>
        <label class="checked">
            <input type="checkbox" name="lbAssistingStaff[]" value="10405">Adam Sandling</label>
        <label>
            <input type="checkbox" name="lbAssistingStaff[]" value="10400">Alta Barba</label>
        <label class="checked">
            <input type="checkbox" name="lbAssistingStaff[]" value="16224">amali silva</label>
    </div>
    <input type="hidden" name="ctl00$ContentPlaceHolder1$ctlViewFilters$hndAssistingStaff" id="hndAssistingStaff" value="10276,10352,14172,14177,10276,10352,14172,10276,10352,14172,14172,14172,14172,14172,10276,10352,14172,10276,10352,14172">
</div>

, который генерируется с помощью множественного выбора JQuery. Существуют отдельные элементы div с одинаковым именем класса с именем class="multiSelectOptions". Теперь мне нужно отправить все проверенные значения параметров в массив только внутри первого элемента Div (верхний элемент Div). Что означает это,

<div class="multiSelectOptions" style="position: absolute; z-index: 99999; visibility: visible; height: 150px; width: 259px; top: 30px; left: 15px;">
    <label class="selectAll">
        <input type="checkbox" class="selectAll">Select All</label>
    <label class="">
        <input type="checkbox" name="lbAssistingStaff[]" value="10307">Dovie Segerson</label>
    <label class="checked">
        <input type="checkbox" name="lbAssistingStaff[]" value="14172">Kajal Jain</label>
    <label>
        <input type="checkbox" name="lbAssistingStaff[]" value="10354">Lydia Nikocevic</label>
    <label class="checked">
        <input type="checkbox" name="lbAssistingStaff[]" value="10355">Margo Mondloch</label>
</div>

Я пробовал это,

$("#lbAssistingStaff").next("div").click(function (e) {
    var listboxID = "lbAssistingStaff";
    var selectedItemIDs = [];
    $('input[name="' + listboxID + '\[\]"]:checked').each(function () {
        selectedItemIDs.push($(this).val());
    });
});

Но это перебирает все элементы div name="lbAssistingStaff[]". Согласно моему требованию массив должен иметь только эти два значения (14172,10355).

Answer 1

Укажите контекст.

$('input[name="' + listboxID + '\[\]"]:checked', this)

Это позволит применить селектор к this, который является div, на который вы нажали.

Answer 2

Использование find в пределах $(this):

$("#lbAssistingStaff").next("div").click(function (e) {
    var listboxID = "lbAssistingStaff";
    var selectedItemIDs = [];
    $(this).find('input[name="' + listboxID + '\[\]"]:checked').each(function () {
    // ^^^^^^^^^
        selectedItemIDs.push($(this).val());
    });
});

---

Примечание: jQuery предлагает функцию map, которую вы можете использовать вместо создания массива и затем нажать на него:

var selectedItemIDs = $(this).find('input[name="' + listboxID + '\[\]"]:checked').map(function () {
    return this.value; // No need to wrap it just to get the value
}).get();

Не забывайте .get() в конце, иначе вы получите объект jQuery вместо истинного массива.