显示/隐藏ul中的li元素

Show/Hide li elements from ul

本文关键字：li 元素 中的 ul 隐藏 显示      更新时间：2023-09-26

我需要隐藏一些特定的li元素从一个基于表单逻辑的ul如下:如果一些文本框是在空白隐藏特定的li元素从菜单(ul)。问题是他们没有在li上使用id和类。请参阅我的小提琴代码:' https://jsfiddle.net/u0dx0qpo/

这是整个逻辑，如果提到的输入是空白的，只显示"下载&打印应用程序"answers"常见问题解答"，否则显示完整菜单。

这是我试图使用的函数:

$(document).ready(function(){    
        if ($("#firstname").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == ""){
            // $('li').not('[title="Download & Print Applications"]').hide();
        }
});

或者更好的是，我不知道是否有可能隐藏一些特定的基于其他属性的li，如标题，如:$('att:xx').hide();，因为我在同一页面中使用另一个菜单，我不想影响或修改这个代码…

您的现有代码中有一些事情会阻止它正常运行:

  1. 针对title="FAQS"(复数)，不针对title="FAQ"(单数)
  2. 目标HTML转义&，而不是&

  3. 针对a元素，然后隐藏父li 

    if ($("#firstname").val() == "" ||
    $("#lastname").val() == "" ||
    $("#socialsecuritynumber").val() == "" ||
    $("#emailaddress1").val() == "") {
  $('a').not('[title="Download & Print Applications"],[title="FAQS"]').parent().hide();
}

这是更正后的JSFiddle。

或者，如果您希望在input元素更改时更新UI，则需要如下内容:

$("input").on('change', function() {
  if ($("#firstname").val() == "" ||
      $("#lastname").val() == "" ||
      $("#socialsecuritynumber").val() == "" ||
      $("#emailaddress1").val() == "") {
    $('a').not('[title="Download & Print Applications"],[title="FAQS"]').parent().hide();
  } else {
    $('li').show();
  }
});

else条件确保在求值时重新显示之前隐藏的所有li元素。

这是相应的JSFiddle。

:

根据关于显式针对DOM元素的注释，给定原始JSFiddle，您可以简单地指定封闭div class:

$('.navbar-left a').not('...')
...
$('.navbar-left li').show();

如果你想用jQuery隐藏或显示特定的<li>，并且你不使用id或类，你可以使用jQuery的第n个子选择器。

例如，你可以用

隐藏第三个

$('.weblinks-depth-1 li:nth-child(3)').hide();

https://api.jquery.com/nth-child-selector/

我更新了if语句上的一些id，以确保代码能够执行，并选择隐藏所有的lis，然后显示具有所需链接的那个。

$(document).ready(function(){
    if ($("#username").val() == "" 
       || $("#lastname").val() == "" 
       || $("#socialsecuritynumber").val() == "" 
       || $("#emailaddress1").val() == ""){
        $('li').hide();
        $('li > a[title="Download & Print Applications"]').parent().show();
    }
});

我将首先检查输入类型"text"是否为空，像这样循环使用它们:

$(document).ready(function(){
    function checkInputs(){
        var emptyInputs = false;
        $('input[type="text"]').each(function(element){
            if( $(this).val() ) {
                $('li a').not('[title="Download & Print Applications"]').hide();
                return;
            }
        });
    }
    $('input[type="text"]').on( 'keydown',function(){
        checkInputs();
    });
});

希望它有帮助，利奥。

如果你正在使用jquery，你可以访问具有其他属性的元素:

$(document).ready(function(){    
        if ($("#firstname").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == ""){
          $('li').hide();
          $("li[data-sitemap-node='/knowledge-base/article/']").show();
          $("li[data-sitemap-node='/content/blank-page/']").show();      
        }
});

js小提琴

您可以使用过滤器:(将此放在文档准备或另一个事件处理程序中)您可能需要修改我使用的包装器div中的类;不知道你的其他菜单…

  if ($("#username").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == "") {
    $('.weblinks.navbar-left').find('li').filter(function() {
      return !$(this).find('[title*="Download & Print Applications"]').length && !$(this).find('[title*="FAQS"]').length;
    }).hide();
  }
相关文章：