如果子元素和父元素具有相同的类,则不显示任何内容

波特曼

我的水平滚动站点周围有这些菜单。

 <section class="fun-stuff portfolio-cards" id="slide-1">

      <div class="nav-list">
      <button class="about">ABOUT</button>
      <button class="fun-stuff">FUN STUFF</button>
      <button class="home">HOME</button>
      <button class="professional">PROFESSIONAL</button>
      <button class="contact">CONTACT</button>
      </div>

</section

目的是根据按钮类是否与本节中的类相同,对它们进行过滤。如果它们具有相同的类(在此示例中为“ fun-stuff”),则该按钮将显示:无。

我的jQuery。我觉得我已经接近或完全复杂化了。

jQuery(document).ready(function($) {

    var theList = $('.nav-list button');

    var i;
    for (i=0; i < theList.length; i++){
      var theButtons = '"' + theList[i].className + '"';
      var parentClassName = theList[i].closest('section').className;

  // tried this one. Was close i believe but no dice
     if(theButtons = theList[i].closest('section').hasClass('"' + theButtons + '"') ){
          // display that button as none
      }

  // tried this as well and for each button got 'no' in the console

      if( $(theList[i].closest('section') ).hasClass(theButtons) ){
        console.log('yes');
      } else {
        console.log ('no');
      }
    }

});
mplungjan

是的,你有些过分了

$(function() {
  $("button").each(function() {
    var $parent = $(this).closest("section"), // the section wrapping the button
           same = $parent.hasClass($(this).attr("class")); // parent has this button's class too
    $(this).toggle(!same); // hide if the same (show if not)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fun-stuff portfolio-cards" id="slide-1">

  <div class="nav-list">
    <button class="about">ABOUT</button>
    <button class="fun-stuff">FUN STUFF</button>
    <button class="home">HOME</button>
    <button class="professional">PROFESSIONAL</button>
    <button class="contact">CONTACT</button>
  </div>
</section>

如果按钮上有多个班级,并且如果其中一个匹配,则要隐藏

$(function() {
  $("button").each(function() {
    var bList = this.classList,
        parentList = $(this).closest("section")[0].classList, // the DOM element's classList
           same = [...parentList] // convert to iterable
            .filter(ele => bList.contains(ele)) // look up parent class in button classList
            .length>0; // found?
    $(this).toggle(!same);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fun-stuff portfolio-cards" id="slide-1">

  <div class="nav-list">
    <button class="about">ABOUT</button>
    <button class="fun-stuff bla">FUN STUFF</button>
    <button class="home">HOME</button>
    <button class="professional">PROFESSIONAL</button>
    <button class="contact">CONTACT</button>
  </div>
</section>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery - 如果子元素具有特定的 css 类,如何将 css 添加到父元素

如果子元素尚未具有相同的属性,则XSL将属性传递给子元素

如果子类与父类具有相同的参数,则子类应该重写构造函数吗?

AngularJs如果父元素具有类,则隐藏子元素

jQuery - 如果子标签和父标签具有相同的名称,如何读取 xml 数据

如果找不到数据,则不显示任何内容

如果IS_NULL为false,则不显示任何内容

Section元素不显示任何内容和/或周围有空格

如何搜索从父阵列子数组的元素,如果父阵列具有子阵列的相同的元素?

jQuery-如果子元素没有文本,如何删除父元素?

更改子元素的颜色,但仅在将特定父元素悬停时(所有父类都具有相同的类)

如果子元素被隐藏,如何隐藏父元素?

区分具有相同ID,名称和类的元素

如果子级包含某些字符串链,如何更改父级元素的CSS类

XPath如果子元素具有值,则选择最后一个元素

当有多个同名的父div时,如果子div类没有内容,隐藏父div类

具有相同内容的CSS组元素

jQuery到PHP:如果子元素超过2个,则将选择器类添加到父元素

如何检查父元素是否包含具有 useEffect 和 UseRef 的特定类的子元素?

GridView 不显示任何元素

如果元素具有特定的CSS类以及其他任何类

jQuery-获取元素的内容,具有不同的内容,但类相同

WordPress如果文件存在,但页面上有文件名,则显示图像,否则不显示任何内容,它的外观如何

如果子节点元素相等,如何添加父节点?

文本和输入元素附加和给定属性的方式相同。显示文字,但不显示输入内容。为什么?

如果datagridview中没有子级,则不显示父级DataTable

对于父元素,有两个子元素。如果子项1的.text()匹配,如何对子项2执行操作

DOM CSS 选择器:如果 li 具有活动类,如何选择父元素的兄弟

DOMParse innerHTML如果是脚本,则不显示第一个元素