Trying to generate an array from jQuery :checked s

Question

I have a table like this:

<tr class="row">
    <td class="row-checkbox-delete-row">
        <input tabindex="-1" class="checkbox-delete-row" type="checkbox" />
    </td>
    <td class="row-target">10</td>
    <td class="row-product-id">
        <input class="id-target row-product-id" name="lineItem[0].originalInput" type="text" data-ajax-line-id="1" />
    </td>
    <td class="row-qty">
        <input class="qty-target row-qty" name="lineItem[0].quantity" type="text" value="1" />
    </td>
    <td class="row-description"></td>
    <td class="row-abc6"></td>
    <td class="row-abc8">
        <input readonly tabindex="-1" class="abc8-target row-abc8" name="lineItem[0].abc8" type="text" />
    </td>
    <td class="row-upc"></td>
    <td class="row-ndc"></td>
</tr>
<tr class="row">
    <td class="row-checkbox-delete-row">
        <input tabindex="-1" class="checkbox-delete-row" type="checkbox" />
    </td>
    <td class="row-target">30</td>
    <td class="row-product-id">
        <input class="id-target row-product-id" name="lineItem[0].originalInput" type="text" data-ajax-line-id="2" />
    </td>
    <td class="row-qty">
        <input class="qty-target row-qty" name="lineItem[0].quantity" type="text" value="1" />
    </td>
    <td class="row-description"></td>
    <td class="row-abc6"></td>
    <td class="row-abc8">
        <input readonly tabindex="-1" class="abc8-target row-abc8" name="lineItem[0].abc8" type="text" />
    </td>
    <td class="row-upc"></td>
    <td class="row-ndc"></td>
</tr>
<tr class="row">
    <td class="row-checkbox-delete-row">
        <input tabindex="-1" class="checkbox-delete-row" type="checkbox" />
    </td>
    <td class="row-target">10</td>
    <td class="row-product-id">
        <input class="id-target row-product-id" name="lineItem[0].originalInput" type="text" data-ajax-line-id="3" />
    </td>
    <td class="row-qty">
        <input class="qty-target row-qty" name="lineItem[0].quantity" type="text" value="1" />
    </td>
    <td class="row-description"></td>
    <td class="row-abc6"></td>
    <td class="row-abc8">
        <input readonly tabindex="-1" class="abc8-target row-abc8" name="lineItem[0].abc8" type="text" />
    </td>
    <td class="row-upc"></td>
    <td class="row-ndc"></td>
</tr>

I have a variable statement like this:

var lineids = $(".checkbox-delete-row:checked").parents("td").siblings(".row-product-id").find(".id-target").attr("data-ajax-line-id");

I am trying to collect all the data-ajax-line-id attributes and put them into an array without looping through the entire thing (using something similar to the jQuery selector I have above) but right now it's returning undefined.

What am I doing wrong?

Answer 1

Try .map()

var arr = $(".checkbox-delete-row:checked").closest("tr").find(".row-product-id .id-target").map(function() {
    return $(this).attr("data-ajax-line-id");
}).get();

---

or

var arr = $(".checkbox-delete-row:checked").closest("tr").find("input.id-target").map(function() {
    return $(this).attr("data-ajax-line-id");
}).get();

---

var arr = $(".checkbox-delete-row:checked").closest("tr").find("input.id-target").map(function() {
    return $(this).data("ajax-line-id");
}).get();