如何用jQuery批量处理ASP DetailsView控件并隐藏对应父容器

Got it, let's break down how to adjust your code to handle multiple DetailsView controls efficiently using class selectors. Here's a straightforward, maintainable approach:

Step 1: Add a Shared CSS Class to Your DetailsViews #

First, ensure every ASP.NET DetailsView has a consistent CSS class applied via the CssClass property. This lets us target all instances in one go:

<asp:DetailsView ID="DetailsView1" CssClass="grid-details-view" runat="server">
    <!-- Your fields here -->
</asp:DetailsView>
<asp:DetailsView ID="DetailsView2" CssClass="grid-details-view" runat="server">
    <!-- Your fields here -->
</asp:DetailsView>

Step 2: jQuery Code for Batch Processing & Hiding #

We’ll loop through each DetailsView, check the target cell’s content, and hide its outer parent div if the content doesn’t meet the "10." criteria. Below are multiple options to target your IP cell—pick the one that fits your markup best:

$(document).ready(function() {
    // Iterate over every DetailsView with our shared class
    $('.grid-details-view').each(function() {
        const $currentView = $(this);
        
        // --- Choose one method to retrieve the IP cell text ---
        
        // Option 1: Target by column index (0-based; e.g., 2nd column = index 1)
        const ipContent = $currentView.find('tr td:eq(1)').text().trim();
        
        // Option 2: Target by a dedicated cell class (add this class to your ItemTemplate)
        // const ipContent = $currentView.find('.ip-address-cell').text().trim();
        
        // Option 3: Target by header text (find row with matching header, then get its value cell)
        // const ipContent = $currentView.find('th:contains("IP Address")').closest('tr').next('tr').find('td').text().trim();
        
        // Check if content does NOT contain "10."
        if (!ipContent.includes('10.')) {
            // Hide the outermost parent container (adjust selector to match your actual wrapper class)
            $currentView.closest('.details-view-wrapper').hide();
        }
    });
});

Key Details & Tips: #

• Class Selector: $('.grid-details-view') eliminates the need to target each DetailsView by its unique ID, making the code scalable.
• .each(): Processes each DetailsView individually, ensuring we check and modify each instance correctly.
• Cell Targeting:
  • Index-based targeting is quick if your IP column never moves.
  • A dedicated cell class is the most reliable (add it to your ASP.NET ItemTemplate for the IP field).
  • Header text targeting works well if column positions might change.
• .closest(): Finds the nearest parent div with your specified wrapper class (replace .details-view-wrapper with your actual container class). This is more robust than .parent() because it works even with nested elements between the DetailsView and outer div.
• .trim(): Removes extra whitespace from the cell text to avoid false negatives (e.g., if the cell has spaces around the IP).

Bonus: Stricter IP Validation #

If you want to ensure the value is a valid 10.x.x.x IP instead of just containing "10.", use a regex check:

const valid10IpRegex = /^10\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
if (!valid10IpRegex.test(ipContent)) {
    $currentView.closest('.details-view-wrapper').hide();
}

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