在2个不同的侧边栏中，同一元素的jquery offset()出现问题

ulydmbyx 于 2023-11-17 发布在 jQuery

关注(0)|答案(2)|浏览(132)

由于我是js新手，我不能自己用offset（）解决问题。
我有两个侧边栏-一个在左边，另一个在右边。在DOM中，左边的优先。
在我的侧边栏中，我有以下结构：

<div class="sidebar-inner">
    <div class="sidebar-header">
        Some blabla
    </div>
    <div class="sidebar-content">
        More blabla
    </div>
    <div class="sidebar-footer">
        Also some blabla
    </div>
</div>

字符串
现在，我尝试通过点击侧边栏中的一个元素来获取jquery中“sidebar-header”的位置。

$('.cssClass1, .cssClass2').on('click', function (){
   var position = $('.sidebar-header').offset();
            
      if (position.top < 0){
         console.log('unvisible');
      } else {
         console.log('visible')
      };

});

型
通过我的代码，我得到了位置，但只是从DOM中第一个出现的“侧边栏标题”（在本例中是左侧边栏）。
我怎样才能从点击cssClass元素的地方得到我的“侧边栏标题”在侧边栏中的位置？

jquery

来源：https://stackoverflow.com/questions/77465213/issue-with-jquery-offset-of-the-same-element-within-2-differnet-sidebars

2条答案

按热度按时间

bq3bfh9z1#

你有没有试过closest方法，去寻找最近的祖先？

$('.cssClass1, .cssClass2').on('click', function () {
    const position = $(this).closest('.sidebar-inner').find('.sidebar-header').offset();

    if (position.top < 0) {
        console.log('unvisible');
    } else {
        console.log('visible');
    }
});

字符串

赞(0）回复(0）举报 2023-11-17

2w3kk1z52#

如果有多个元素，则需要使用.each()：

$(document).on('click', 'button', function(){
  $('.sidebar-inner').each(function(){
    const { top } = $(this).offset();
    console.log(top);
  })
})

.page {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}

.sidebar-inner:last-child {
  margin-top: 40px;
  align-self: start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
  <div class="sidebar-inner">
    <div class="sidebar-header">
      Some blabla
    </div>
    <div class="sidebar-content">
      More blabla
    </div>
    <div class="sidebar-footer">
      Also some blabla
    </div>
  </div>
  <main></main>
  <div class="sidebar-inner">
    <div class="sidebar-header">
      Some blabla
    </div>
    <div class="sidebar-content">
      More blabla
    </div>
    <div class="sidebar-footer">
      Also some blabla
    </div>
  </div>
</div>
<button>Get Sidebars Offset</button>

赞(0）回复(0）举报 2023-11-17

我来回答

在2个不同的侧边栏中，同一元素的jquery offset()出现问题

2条答案

相关问题

热门标签

最新问答