如何在Wordpress侧边栏小部件中隐藏列表条目?

时间:2017-04-18 17:46:18

标签: javascript jquery wordpress

我正在尝试隐藏WordPress中侧边栏小部件中的列表条目。这是一个截图。标有“A”的侧边栏小部件由4个组合框组成。在第一个标有“Werkstatt”的组合框中有一个名为“NeuesInserathinzufügen”的项目。我的目标是隐藏这个项目。

enter image description here

我已经尝试了很多不同的方法,下面的一个使用jQuery似乎是最好的方法。但它不起作用,要么完整的组合框消失,要么“NeuesInserathinzufügen”条目根本不会消失。这是我在functions.php

中的代码段
<?php
function js_hide_list_entry() {
?>
    <script type="text/javascript">
    jQuery(function ($) {
        $(document).ready(function () {
            $("div span:contains('Neues Inserat hinzufügen')").parent("div").hide();
        });
    });
    </script>
<?php
}
add_action( 'wp_footer', 'js_hide_list_entry' );
?>

知道错误在哪里吗?

根据Andrei Gheorghiu回复更新:

我在我的WordPress安装中的functions.php中尝试了你的代码片段。但是我收到了以下错误:Uncaught TypeError: $ is not a function。我搜索了这个问题并发现,在noConflict()模式下,jQuery的全局$快捷方式不可用。所以我稍微修改了你的代码:

<?php
function js_hide_list_entry() {
?>
<script type="text/javascript">
jQuery(function ($) {
    $(document).ready(function () {
        $("div").filter(function() { 
          return ($(this).text().indexOf('Neues Inserat hinzufügen') > -1) 
        }).closest('div').hide();
      });
    });
    </script>
<?php
}
add_action( 'wp_footer', 'js_hide_list_entry' );
?>

现在不再出现错误,但列表条目仍然存在:(

我猜动作挂钩wp_footer有效,否则我不会在脚本中抛出任何错误,对吗?

1 个答案:

答案 0 :(得分:1)

您错误地将<span>定位在<div>内包含您的文字,但文本位于<div>内部的文本节点中,因此它是{{1}的兄弟}}。这将(很可能)有效:

<span>

测试:

<script type="text/javascript">
(function($){
  $(window).on('load', filterResults);
  $('select').on('select2:opening', filterResults);
  function filterResults(){
    $("li>.select2-result-label").filter(function() { 
      return ($(this).text().indexOf('Neues Inserat hinzufügen') > -1) 
    }).closest('li').hide();
  }
})(jQuery);
</script>
(function($){
  $(window).on('load', filterResults);
  $('select').on('select2:opening', filterResults);
  function filterResults(){
    $("div").filter(function() { 
      return ($(this).text().indexOf('Neues Inserat hinzufügen') > -1) 
    }).closest('div').hide();
  }
})(jQuery);

如果不检查是否:

  • 您在模板中致电<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><span>bla bla bla Neues Inserat hinzufügen</span></div> <div><span>bla bla bla</span></div> <div><span>Neues Inserat hinzufügen bla bla bla </span></div> <div><span>bla bla bla</span></div> <div><span>bla bla bla </span> Neues Inserat hinzufügen </div> <div><span>bla bla bla </span> <p><strong>Neues Inserat hinzufügen</strong></p> </div>
  • 您通过<?php get_footer(); ?>$(document).ready被解雇后添加要隐藏的内容 - 在这种情况下,您需要在每次$.ajax()来电后运行您的功能。

注意我也将$.ajax()选择器替换为:contains(),速度更快。