在 ul 中显示/隐藏 li 元素答案

【问题标题】：Show/Hide li elements from ul在 ul 中显示/隐藏 li 元素
【发布时间】：2016-10-17 12:28:44
【问题描述】：

我需要根据表单逻辑从 ul 中隐藏一些特定的 li 元素，如下所示：如果某些文本框为空白，则从菜单 (ul) 中隐藏特定的 li 元素。问题是他们没有在 li 上使用 id 或 classes。请看我的小提琴代码：`https://jsfiddle.net/u0dx0qpo/

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

这是我尝试使用的功能：

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

或者更好的是，我不知道是否可以根据标题等其他属性隐藏某些特定的 li，例如：$('att:xx').hide();，因为我在同一页面中使用另一个我不想的菜单从此代码影响或修改...

【问题讨论】：

下载和打印应用程序和常见问题解答将位于第 3 和第 4 位是否已修复
检查 li 值的标题不是一个好习惯，因为如果它们的值在任何时间点发生变化，您也需要修改条件，这将是紧密耦合的
您可以更好地添加一些课程以下载和常见问题解答并使用课程进行检查
您应该将您的问题编辑为 1) 将 jQuery 添加到您的 JSFiddle 构建中，2) 将代码正确包装在括号和括号中，以及 3) 将 id 属性添加到您的 DOM 元素（或至少解释为什么不可能）。
对不起我的无知，但我没有看到那个解决方案，你能指导我吗？

标签： javascript jquery html

【解决方案1】：

您的现有代码存在一些问题，导致其无法正常运行：

定位到title="FAQS"（复数），而不是title="FAQ"（单数）
目标 HTML 转义 &amp;，而不是 &amp;

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

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

Here's the corrected 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 元素。

Here's the corresponding JSFiddle.

更新：

根据this comment 关于明确定位DOM 元素，给定original JSFiddle，您可以简单地指定封闭的div class 因此：

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

【讨论】：

像这样工作得很好，但是它隐藏了同一页面中存在的另一个菜单中的其他选项。还是谢谢你。
您可以通过将此特定标记封装在 div 元素中来更精细地定位。我提供的代码仅基于原始 JSFiddle 中的标记。如果这个答案效果很好，正如你所提到的，请考虑投票或accepting it as correct。
快速问题@zeantsoi，您如何在该函数中指定您希望将该逻辑应用于该特定 ul 并使用名为：xxx 的类，以避免在同一页面的其他菜单中应用相同的逻辑我不想要的？
@john 我添加了对更精细的 DOM 定位的解释。如果有帮助，您可能需要考虑为答案投票。

【解决方案2】：

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

例如，您可以使用隐藏第三个

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我会先去检查输入类型“文本”是否为空，如下所示：

$(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();
    });
});

希望对你有帮助，狮子座。

【讨论】：

当然也有帮助！

【解决方案5】：

如果您使用的是 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 fiddle

【讨论】：

我想我应该用这个 jquery 函数一个一个地隐藏所有 li，因为我在同一页面中有另一个我不想触摸的菜单，这意味着我不能说 $('li').hide () 除非我在某处指定 ul 和类专门应用隐藏 (ul class="weblinks-depth-1 nav navbar-nav")...
在显示之前隐藏所有元素会导致 DOM 在重新渲染时不必要地闪烁。
是的.. 一个一个隐藏比隐藏所有并显示所需的@John 更有意义

【解决方案6】：

您可以使用过滤器：（将其放入准备好的文档或另一个事件处理程序中）您可能需要修改我使用的包装器 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();
  }

【讨论】：