jQuery调用show()显示隐藏div后无法查找内容，求解决方案

核心原因 #

你的问题大概率是以下两个原因之一：

• :contains选择器区分大小写：jQuery原生的:contains是严格区分大小写的，如果full_text里的文本和你传入的text参数大小写不一致，就会匹配失败。
• 选择器范围太宽泛，误匹配其他元素：你用的#main-content *:contains('" + text + "'):last会匹配main-content下所有包含目标文本的元素，包括之前隐藏的short_text里的内容（哪怕short_text已经hide()，DOM里的文本依然存在，:contains还是能匹配到），导致最后滚动到的是short_text里的位置，但这个div已经隐藏，看起来就像没生效。

另外还有个潜在问题：你代码里的$('.full_text').parents('.panel')其实找不到元素——从HTML结构看，full_text的父级是main-content，和ul.panel没有嵌套关系，这行代码等于白写，不过这和查找内容失败无关。

解决步骤 #

1. 替换为不区分大小写的包含选择器
   原生:contains太严格，自己写一个忽略大小写的版本：

   // 自定义不区分大小写的contains选择器
   $.expr[":"].containsIgnoreCase = function(element, index, match) {
     return $(element).text().toUpperCase().indexOf(match[3].toUpperCase()) >= 0;
   };
   

   然后把函数里的:contains换成:containsIgnoreCase。

2. 缩小选择器范围，只在full_text里查找
   避免匹配到short_text里的旧内容，把查找代码改成：

   const targetElement = $("#main-content .full_text *:containsIgnoreCase('" + text + "'):last");
   if (targetElement.length > 0) {
     $(window).scrollTop(targetElement.offset().top);
   }
   

3. 确认元素确实已显示
   可以在show的回调里加一行调试代码，确认full_text已经可见：

   $('.full_text').show(1, function() {
     console.log('full_text是否可见：', $(this).is(':visible'));
     // 后面的查找代码
   });
   

如果做完这些还是不行，那就要检查full_text里的内容是不是动态加载的——比如点击标签后才通过AJAX拉取内容，如果是这种情况，你需要等内容加载完成后再执行滚动逻辑，而不是在show的回调里直接执行。

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