代码之家  ›  专栏  ›  技术社区  ›  usernameabc

有没有其他方法来获得孙子的元素?

  •  1
  • usernameabc  · 技术社区  · 6 年前

    我们有一份菜单,其结构如下( ul > li > a ). 我们想找到所有 <a> 有一个css类以 color-- bkg-- .

    我知道我可以通过做 $(element).children().children() . 有没有更简单的方法让所有的孙子孙女,检查他们是否拥有这个类,然后使用 jQuery ?

    我们所做的:

        $(function() {
          var grandChildren = $('#someid > li > a');
          grandChildren.removeClass('[class*="bkg--"]');
          grandChildren.removeClass('[class*="color--"]');
        });
        .bkg--black {
          background-color: black;
        }
        .bkg--white {
          background-color: white;
        }
        .bkg--red {
          background-color: red;
        }
        .bkg--blue {
          background-color: blue;
        }
    
        .color--white {
          color: white;
        }
        .color--black {
          color: black;
        }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <ul id='someid'>
      <li>
        <a class="bkg--black color--white" href="#">Some path 1</a>
      </li>
      <li>
        <a class="bkg--white color--black" href="#">Some path 2</a>
      </li>
      <li>
        <a class="bkg--red color--white" href="#">Some path 3</a>
      </li>
      <li>
        <a class="bkg--blue color--white" href="#">Some path 4</a>
      </li>
    </ul>
    1 回复  |  直到 6 年前
        1
  •  0
  •   Roko C. Buljan    6 年前

    对。只需使用 .find() method some code from your previous question

    jQuery(function($) { // Better DOM ready
    
      $("#someid").find("a").prop("class", function(i, cls) {
        return cls.replace(/(^|\s)(bkg|color)--\S+/g, '');
      });
    
    });
    .bkg--black {
      background-color: black;
    }
    
    .bkg--white {
      background-color: white;
    }
    
    .bkg--red {
      background-color: red;
    }
    
    .bkg--blue {
      background-color: blue;
    }
    
    .color--white {
      color: white;
    }
    
    .color--black {
      color: black;
    }
    <ul id='someid'>
      <li>
        <a class="bkg--black color--white" href="#">Some path 1</a>
      </li>
      <li>
        <a class="bkg--white color--black" href="#">Some path 2</a>
      </li>
      <li>
        <a class="bkg--red color--white" href="#">Some path 3</a>
      </li>
      <li>
        <a class="bkg--blue color--white" href="#">Some path 4</a>
      </li>
    </ul>
    
    
    <script src="//code.jquery.com/jquery-3.1.0.js"></script>

    专业提示:

    '[class^="bkg--"]' 对你来说还不够 class="foo bkg--red" 自从 ^= 方法 开始于 ;但它始于 foo .
    而是使用:

    '[class^="bkg--"], [class*=" bkg--"]'