Finding Page Elements with Specific Text in ID Using jQuery Selectors

Fundamental Principles of jQuery Selectors

jQuery selectors are powerful tools based on extended CSS selector syntax, capable of quickly locating specific elements in the DOM. In web development, it's often necessary to filter elements based on their attribute values, with ID attribute matching being particularly important as unique identifiers.

Implementation of Attribute Contains Selector

Using the $('*[id*=mytext]') selector finds all elements whose ID attribute contains the "mytext" substring. The asterisk * here matches all element types, while [id*=value] is jQuery's attribute contains selector syntax that checks whether an element's ID attribute contains the specified substring.

Integration of Visibility Filtering

Combining :visible and :hidden selectors allows filtering found elements by visibility. For example, $('*[id*=mytext]:visible') selects only visible matching elements, while $('*[id*=mytext]:hidden') selects hidden matching elements. This combination significantly enhances the selector's practicality.

Complete Code Example and Analysis

Here's the complete implementation code:

$('*[id*=mytext]:visible').each(function() {
    // Perform operations on each matching visible element
    console.log($(this).attr('id'));
    $(this).addClass('highlight');
});

This code first uses the wildcard to select all elements, then filters elements with IDs containing specific text through the attribute contains selector, and finally uses the visibility selector to filter out visible elements. Within the each loop, custom operations can be performed on each matching element.

Other Attribute Selector Variants

Besides the contains selector, jQuery provides multiple attribute matching methods:

• $("input[id^='DiscountType']") - matches elements whose IDs start with a specific string
• $("input[id$='DiscountType']") - matches elements whose IDs end with a specific string
• $("input[id!='DiscountType']") - matches elements whose IDs are not equal to a specific string

Performance Optimization and Best Practices

In practical applications, avoid using the wildcard selector * whenever possible as it traverses all DOM elements, impacting performance. A better approach is to limit element types, such as $("div[id*=mytext]"). Also, ensure selectors execute after the DOM is fully loaded:

$(document).ready(function() {
    $('div[id*=mytext]:visible').each(function() {
        // Operation code
    });
});

Coordination with Page Loading Events

Referencing best practices for DOM loading monitoring ensures selectors execute at the correct timing. While jQuery's $(document).ready() can handle basic load completion events, more refined loading state monitoring mechanisms may be needed for dynamically loaded content.

Practical Application Scenarios

This selector combination is particularly useful in scenarios such as dynamic content filtering, form validation, UI state management, and automated testing. By flexibly applying various attribute selectors and state filters, powerful and efficient web applications can be built.