WordPress插件Social Feed Gallery：隐藏含'remove_me'标签的元素

问题背景 #

使用WordPress插件Social Feed Gallery导入Instagram图片到网站图库时，需要隐藏所有data-item属性中包含remove_me标签的.insta-gallery-item容器。

目标HTML结构示例 #

<div id="insta-gallery-feed">
    <div class="insta-gallery-inner">
        <div id="insta-gallery-item-17972204888477284" class="insta-gallery-item" data-item="{hashtags&amp;quot;:[&amp;quot;isleofskye&amp;quot;,&amp;quot;remove_me&amp;quot;,&amp;quot;ferry&amp;quot;,&amp;quot;mountains&amp;quot;,&amp;quot;ferrydogs&amp;quot;,&amp;quot;scotland&amp;quot;,&amp;quot;coastalwaters&amp;quot;,&amp;quot;scottishlandscape&amp;quot;,&amp;quot;Glenelg&amp;quot;,&amp;quot;ferry&amp;quot;,&amp;quot;overthrseatoskye&amp;quot;,&amp;quot;sailing&amp;quot;,&amp;quot;scotland&amp;quot;,&amp;quot;visitscotland&amp;quot;,&amp;quot;instascotland&amp;quot;,&amp;quot;nature&amp;quot;,&amp;quot;scotlandshots&amp;quot;,&amp;quot;lovescotland&amp;quot;,&amp;quot;nathistships&amp;quot;],&amp;quot;link&amp;quot;:&amp;quot;}" data-elementor-open-lightbox="no">
            <img src="image-is-here.jpg">
        </div>
    </div>
</div>

尝试过的无效代码 #

<script>
(function($) {
$(document).ready(function() {

$('#insta-gallery-feed').find('.insta-gallery-item').each(function() {

  if ($(this).data('item').indexOf('remove_me') !== -1) {
    $(this).hide();
  }
});
});

})(jQuery);
</script>

问题原因 #

原代码使用$(this).data('item')时，jQuery会尝试自动解析data-item中的JSON字符串，但由于属性值存在双重转义错误（比如"是转义后的引号），导致解析失败，无法正常调用indexOf方法。

解决方案 #

方案1：直接匹配原始属性字符串 #

跳过JSON解析，直接获取data-item的原始属性值进行字符串匹配，简单高效：

(function($) {
    $(document).ready(function() {
        $('#insta-gallery-feed .insta-gallery-item').each(function() {
            // 直接读取原始属性字符串，判断是否包含目标标签
            if ($(this).attr('data-item').includes('remove_me')) {
                $(this).hide();
            }
        });
    });
})(jQuery);

方案2：修复JSON解析后精准判断 #

先修复属性值的转义错误，解析为合法JSON后，精准检查hashtags数组中是否包含remove_me，避免误判：

(function($) {
    $(document).ready(function() {
        $('#insta-gallery-feed .insta-gallery-item').each(function() {
            const rawData = $(this).attr('data-item');
            // 修复双重转义的引号，转换为标准JSON格式
            const fixedJson = rawData.replace(/"/g, '"');
            
            try {
                const itemData = JSON.parse(fixedJson);
                // 检查hashtags数组是否存在目标标签
                if (itemData.hashtags && itemData.hashtags.includes('remove_me')) {
                    $(this).hide();
                }
            } catch (e) {
                // 解析失败时降级为字符串匹配
                if (rawData.includes('remove_me')) {
                    $(this).hide();
                }
            }
        });
    });
})(jQuery);

方案3：纯CSS实现（无JS依赖） #

如果不需要兼容老旧浏览器，直接使用CSS属性包含选择器隐藏元素，性能最优：

.insta-gallery-item[data-item*="remove_me"] {
    display: none !important;
}

方案选择建议 #

• 优先用方案1：快速解决问题，无需处理复杂的JSON解析
• 需要精准判断时用方案2：避免其他字段出现remove_me导致误隐藏
• 无动态加载场景用方案3：纯CSS实现，无需JS执行开销

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