个人中心
gpt4 book ai didi

javascript - 查找最近的相似 sibling

转载 作者：行者123 更新时间：2023-12-03 18:53:25 24 4
gpt4 key购买 nike

我希望能够点击<i> , <a> ，或 <li>并获取所有 <li> s。
关键是要检测最接近的重复元素，无论您单击的子元素有多深。
这就是我到目前为止所拥有的:它显示了 sibling 的数量，但我想隔离的是相同性。
例如:<body>显示 2 个 sibling ，但他们不是两个 <body> . <header>显示 4，但并非全部 <header> .我如何只计算相同的 sibling 。在这种情况下 <li>但可以是任何东西。
//整页运行↗️

$('body').on('click', (e) => {
  $el = $(e.target);

  $parentsAndSelf = $el.parents().addBack();
  
  $parentsAndSelf.each( (i,el) => {
    if( $(el).siblings().addBack().length > 1){
      console.log( el,  $(el).siblings().addBack().length );
      //return false;
    }
    
  });
});
* {
  padding: 5px;
  margin:5px;
  outline: 1px solid pink;
  list-style-position: inside;
}

a {
  display: block
}

.highlight{
  background:yellow;
}

*:hover {
  outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  HEADER:
  <nav>
    NAV:
    <ul>
      UL:
      <li>li <a href="#">item <i>1</i></a> </li>
      <li>li <a href="#">item <i>2</i></a> </li>
      <li>li <a href="#">item <i>3</i></a> </li>
      <li>li <a href="#">item <i>4</i></a> </li>
    </ul>
  </nav>
</header>

最佳答案

在介绍 jQuery 之前，让我从一个非常简单的 JavaScript 想法开始:
JavaScript - 获取第一个最接近的多个 sibling
这可以通过使用 Element.querySelectorAll() 轻松完成。与 ":scope >"查询相同 Element.tagName 的直接子元素, 和 递归函数 :

const closestMultiple = el => {
  const par = el.parentElement;
  const sib = par && par.querySelectorAll(`:scope > ${el.tagName}`);
  return (sib && sib.length > 1 ? sib : par && closestMultiple(par))
}

document.body.addEventListener("click", (ev) => {
  const cm = closestMultiple(ev.target)
  if(cm) cm.forEach(EL => EL.classList.toggle("highlight"));
});
* {
  padding: 5px;
  margin: 5px;
  outline: 1px solid pink;
  list-style-position: inside;
  background: #fff;
}
*:hover {
  outline: 1px solid red;
}

a {
  display: block
}

.highlight {
  background: yellow;
}
<header>
  <div>
    HEADER:
  </div>
  <div>
    <nav>
      NAV:
      <ul>
        UL:
        <li>li <a href="#">item <i>1</i></a> </li>
        <li>li <a href="#">item <i>2</i></a> </li>
        <li>li <a href="#">item <i>3</i></a> </li>
        <li>li <a href="#">item <i>4</i></a> </li>
      </ul>
    </nav>
  </div>
</header>

jQuery - 获取第一个最接近的多个 sibling
  • 使用 .reverse() 反转数组以加快从目标元素(而不是文档)开始的过程。
  • 立即停止循环 Array.prototype.some()匹配 length > 1标准:

    • function closestMultiple(el, $mu) {
      return $(el).parents().addBack().get().reverse().some(el => {
        const $gr = $(el).siblings(el.tagName).addBack();
        return ($gr.length > 1 ? $mu = $gr : 0);
      }) && $mu || $();
    }

    function closestMultiple(el, $mu) {
      return $(el).parents().addBack().get().reverse().some(el => {
        const $gr = $(el).siblings(el.tagName).addBack();
        return ($gr.length > 1 ? $mu = $gr : 0);
      }) && $mu || $();
    }

    $(document).on('click', (ev) => {
      const $clRep = closestMultiple(ev.target).toggleClass("highlight");
      console.clear(); console.log($clRep.length +" "+ $clRep.prop("tagName"));
    });
    * {
      padding: 5px;
      margin: 5px;
      outline: 1px solid pink;
      list-style-position: inside;
      background: #fff;
    }
    *:hover {
      outline: 1px solid red;
    }

    a {
      display: block
    }

    .highlight {
      background: yellow;
    }
    <header>
      <div>
        HEADER:
      </div>
      <div>
        <nav>
          NAV:
          <ul>
            UL:
            <li>li <a href="#">item <i>1</i></a> </li>
            <li>li <a href="#">item <i>2</i></a> </li>
            <li>li <a href="#">item <i>3</i></a> </li>
            <li>li <a href="#">item <i>4</i></a> </li>
          </ul>
        </nav>
      </div>
    </header>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    jQuery 微插件
    为了获得更好的体验(因为您已经在使用 jQuery)，您可以扩展 jQuery用你自己的构造函数 .closestMultiple()方法。
    这是一个微插件的建议: 

    $.fn.closestMultiple = function($mu) {
      return this.parents().addBack().get().reverse().some(el => {
        const $gr = $(el).siblings(el.tagName).addBack();
        return ($gr.length > 1 ? $mu = $gr : 0);
      }) && $mu || $();
    }

    $(document).on('click', (ev) => {
      $(ev.target).closestMultiple().toggleClass("highlight");
    });
    * {
      padding: 5px;
      margin: 5px;
      outline: 1px solid pink;
      list-style-position: inside;
      background: #fff;
    }

    a {
      display: block
    }

    .highlight {
      background: yellow;
    }

    *:hover {
      outline: 1px solid red;
    }
    <header>
      <div>
        HEADER:
      </div>
      <div>
        <nav>
          NAV:
          <ul>
            UL:
            <li>li <a href="#">item <i>1</i></a> </li>
            <li>li <a href="#">item <i>2</i></a> </li>
            <li>li <a href="#">item <i>3</i></a> </li>
            <li>li <a href="#">item <i>4</i></a> </li>
          </ul>
        </nav>
      </div>
    </header>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    关于javascript - 查找最近的相似 sibling ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66448504/

    24 4 0
    文章推荐： javascript - React Native - 如何执行非常柔和的振动？
    文章推荐： iphone - MFMailComposeViewController 有其他语言吗？
    文章推荐： iphone - 雪豹和 XCode 3.1
    文章推荐： git - 如何从我的 Github 组织的 wiki 中访问消失的内容？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com