javascript - 查询 : Immediate element (not children) highlight not in another div element

Question

您好，我在我的应用程序中使用 foreach 重复 div。因此，我在当前元素点击功能上遇到了问题。当我点击当前的 div 时，我需要突出显示另一个 div，它位于目标 div 的下方(这不是子 div)。所以，问题是同一个 div 在另一个 div 中突出显示，它也在使用 foreach 重复。

请看一下，请帮助我。

这是示例链接 Fiddle

点击 "click 1"div ，然后你会得到问题所在。`

$(".prev").click(function(){
   
    $( ".prev ~ div" ).css( "border", "3px groove blue" );
});

div, span {
    display: block;
    width: 80px;
    height: 80px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  }
  div#small {
    width: 60px;
    height: 25px;
    font-size: 12px;
    background: #fab;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="prev">click1</span>
<div>click 1 highlight</div>    
</div>

<div>
<span class="prev">click1</span>
<div>click 1 highlight</div>    
</div>

`

Answer 1

ID 在 HTML 中必须是唯一的。所以改用类:

<div>
<span class="prev">span#prev</span>
<div>div sibling</div>    
</div>

<div>
<span class="prev">span#prev</span>
<div>div sibling</div>    
</div>

j查询

$(".prev").click(function(){
    $(".prev").next().css("border", 'none');
    $( this).next().css( "border", "3px groove blue" );
});

Fiddle