获取具有指定类的第一个元素，该元素位于单击元素之上

Question

所以，如果我有以下Html结构：

 <div class='main'> </div>
 <div class='main'> </div>
 <div class='main'> </div> <!-- the element i want to get -->
     <div class="second"> </div>
     <div class="second"> </div> <!-- element clicked -->
     <div class="second"> </div>
<div class='main'> </div>
<div class='main'> </div>


$(document).on('click', 'second', function(){
  $(this). ?
}

如何通过点击的div上方的类main从底部获取第一个元素？

所有这些类都有一个独特的id，我将获得('.main').attr('id')，但我需要以某种方式获得第一个元素，其中类name位于cliked元素之上。

Answer 1

我不确定是否理解这个问题，但是，如果你想要点击的第二个元素并不重要，并且你想要总是得到最后一个主要元素，你可以用这种方式在vanilla javascript中执行：

const main = document.querySelector('.main-container')
const second = document.querySelector('.second-container')

second.addEventListener('click',function(){
	let last = main.lastElementChild
  console.log(last)
})

<div class="main-container">
  <div class='main'>main 1 </div>
 <div class='main'> main 2</div>
 <div class='main'> main3</div>
</div>

 <div class="second-container">
   <div class="second"> second1</div>
     <div class="second">second2 </div> <!-- element clicked -->
     <div class="second">second 3 </div>
 </div>

Answer 2

var $target = $($this.siblings('.main').get().reverse().find(x=>$(x).index()<index))

就是这样。

找到所有带有'.main'类的兄弟姐妹，让他们反向

找到第一个索引小于你点击的索引

$(".second").on('click',function(){
    var $this = $(this)
    var index = $this.index()
    var $target = $($this.siblings('.main').get().reverse().find(x=>$(x).index()<index))
    console.log($target)
})

div{
    width: 20px;
    height: 20px;
}
.main{
    outline: 1px red solid;
}

.second{
    outline: 1px blue solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main'> </div>
<div class='main'> </div>
<div class='main'> </div> <!-- the element i want to get -->
<div class="second"> </div>
<div class="second"> </div> <!-- element clicked -->
<div class='main'> </div>
<div class='main'> </div>
<div class="second"> </div>
<div class="second"> </div>