使用jQuery按文件扩展名修改特定父元素下子元素的样式

Got it, let's sort out that annoying PSD/Sketch icon overlap. Since you can't touch the MIME type generation code, we'll target elements directly using their data-file attribute to swap out the icon style. Here's how to do it step by step:

Basic Solution (For Static File Lists) #

If your file directory loads once when the page loads, this simple snippet will work:

// Wait for the DOM to fully load before manipulating elements
$(document).ready(function() {
  // Target every element with a data-file attribute ending in .psd
  $('[data-file$=".psd"]').each(function() {
    // Grab the child div inside this parent element (adjust the selector if needed)
    const iconDiv = $(this).find('div');
    
    // Update the style to your custom PSD icon
    iconDiv.css({
      'background-image': 'url("path/to/your/custom-psd-icon.png")', // Replace with your icon path
      'background-size': '100% 100%', // Adjust sizing to match your existing icons
      'background-repeat': 'no-repeat'
    });
  });
});

Key Details Explained #

• [data-file$=".psd"]: This attribute selector targets any element where the data-file value ends with .psd—perfect for filtering out Photoshop files.
• .each(): Loops through every matching PSD element so we can update each one individually.
• $(this).find('div'): Adjust this if your icon div has a specific class (e.g., .file-icon) to make the selector more precise (like $(this).find('.file-icon')). This avoids accidentally modifying other divs in the parent element.
• Style Adjustments: Tweak background-size, width, height, etc., to match the existing icon styling so your PSD icon doesn't look out of place.

For Dynamic File Lists (AJAX/Lazy Loaded) #

If your file list loads dynamically (e.g., via AJAX or lazy scrolling), the basic snippet won't catch new elements added after the page loads. Use one of these options:

Option 1: Run the Code After Dynamic Content Loads

If you control the AJAX call, add the icon update code to the success callback:

// Example AJAX call to load files
$.ajax({
  url: '/api/get-file-list',
  method: 'GET',
  success: function(fileData) {
    // Insert the new file elements into the DOM first
    $('#file-directory').html(fileData);
    
    // Now update the PSD icons
    $('[data-file$=".psd"]').each(function() {
      $(this).find('.file-icon').css({
        'background-image': 'url("path/to/your/custom-psd-icon.png")'
      });
    });
  }
});

Option 2: Use MutationObserver for Automatic Updates

For cases where you don't control the dynamic load (e.g., third-party plugins), use a MutationObserver to watch for new elements and update icons automatically:

// Set up the observer to watch your file directory container
const fileContainer = document.getElementById('file-directory');
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // Check each newly added node for PSD files
    $(mutation.addedNodes).find('[data-file$=".psd"]').each(function() {
      $(this).find('.file-icon').css({
        'background-image': 'url("path/to/your/custom-psd-icon.png")'
      });
    });
  });
});

// Start observing for new child elements
observer.observe(fileContainer, {
  childList: true,
  subtree: true
});

// Also run once on initial page load
$(document).ready(function() {
  $('[data-file$=".psd"]').each(function() {
    $(this).find('.file-icon').css({
      'background-image': 'url("path/to/your/custom-psd-icon.png")'
    });
  });
});

Pro Tips #

• Avoid !important: If your existing icon styles have high priority, try making your selector more specific (e.g., #file-directory [data-file$=".psd"] .file-icon) instead of using !important in the CSS.
• Test Paths: Double-check your icon file path—use a relative path if the icon is in your project, or an absolute URL if it's hosted elsewhere.

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