如何从jQuery.parentsUntil()获取的多个div中提取ID用于Ajax与绘图？

Got it, let's break down how to pull those IDs from the elements you're targeting with parentsUntil()—perfect for your plotting and Ajax work. Here's how to integrate this into your existing checkbox change handler:

Step 1: Extract IDs into an Array #

Your current code already grabs the correct element set with prod.parentsUntil('.container-fluid'). We just need to iterate over that collection and pull out each element's ID. jQuery's .map() method is ideal for this, and we'll convert the result to a plain JavaScript array with .get() for easy use later:

$(document).on('change', ':checkbox', function(e) { 
    var prod = $(this).closest("#product"); 
    var productUntilContainer = prod.parentsUntil('.container-fluid'); 
    
    // Extract all IDs from the matched elements into an array
    var targetIds = productUntilContainer.map(function() {
        // Use native DOM id property for better performance
        return this.id;
    }).get();
    
    console.log('Extracted IDs:', targetIds);
    
    // Now you can use targetIds for plotting or Ajax calls
    // Example Ajax request:
    // $.ajax({
    //     url: '/your-api-endpoint',
    //     method: 'POST',
    //     data: { relatedIds: targetIds },
    //     success: function(response) {
    //         // Handle response for plotting, etc.
    //     }
    // });
}); 

Step 2: Optional Filter for Empty IDs #

If some of your divs might not have IDs (though your structure looks consistent), you can add a filter to skip empty values:

var targetIds = productUntilContainer.map(function() {
    return this.id || null;
}).get().filter(id => id !== null);

Step 3: Verify the Output #

Based on your HTML structure, when a checkbox is toggled, parentsUntil('.container-fluid') will capture these elements (in order from closest to farthest from the product div):

• #Marja (the site div)
• #18-11-20 (the date div)
• #progress or #complete (the status container)

So your targetIds array will look like ["Marja", "18-11-20", "progress"]—exactly the hierarchy you need.

Full Modified Code #

Here's the complete code with the ID extraction integrated:

$(document).on('change', ':checkbox', function(e) { 
    var prod = $(this).closest("#product"); 
    var productUntilContainer = prod.parentsUntil('.container-fluid'); 
    
    // Extract IDs to array
    var targetIds = productUntilContainer.map(function() {
        return this.id;
    }).get();
    
    console.log('Target IDs:', targetIds);
    
    // Your existing checkbox logic, now with IDs available
    if ($(this).is(":checked")) {
        console.log('Checkbox checked, sending IDs:', targetIds);
        // Add your plotting/Ajax logic here
    } else {
        console.log('Checkbox unchecked, related IDs:', targetIds);
        // Add your cleanup/updates here
    }
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<div class="container-fluid" id="product-list-container"> 
    <!-- Your existing HTML structure remains unchanged -->
    <div id="progress" class="in-progress">In progress 
        <div id="18-11-20" class="datess">18-11-20 
            <div id="Marja"> 
                <h4> 
                    <p class="badge badge-secondary"> Marja </p> 
                </h4> 
                <div id="product" class="col-lg-3 no-gutter"> 
                    <!-- Product content -->
                    <div class="btn-shop row justify-content-between no-gutter"> 
                        <div class="custom-control form-control-lg custom-checkbox"> 
                            <input type="checkbox" class="custom-control-input" id="112"> 
                            <label class="custom-control-label" for="112"></label> 
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Other product blocks -->
</div>

Quick Notes #

• Using this.id (native DOM property) is faster than $(this).attr('id')—small win, but good practice.
• If you need the IDs in reverse order (farthest to closest), just add targetIds.reverse() after extracting the array.
• The array is ready to use directly in Ajax data or as input for your plotting library.

内容的提问来源于stack exchange，提问作者Hik200