如何檢查是否點擊的元素是之前或當前有源元件

Question

我有一個列表項後，第一個已經有.active類。

當我點擊到其他列表項中，.active類移動到點擊的元素。

但問題是，我無法檢測到，如果說我以前.active元素之前或之後單擊項目。

這裏的腳本

$(document).ready(function(){ 
 
    var $li = $("li"); 
 

 
    $li.each(function(){ 
 
    $(this).click(function(){ 
 
     $li.removeClass("active"); 
 
     $(this).addClass("active"); 
 
     
 
     if($("li.active").next($(this))){ 
 
     \t \t $("span").text("after clicked element"); 
 
     } else { 
 
     \t \t $("span").text("before clicked element"); 
 
     } 
 
    }) 
 
    }) 
 
})

li.active { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="active">Check 1</li> 
 
    <li>Check 2</li> 
 
    <li>Check 3</li> 
 
    <li>Check 4</li> 
 
</ul> 
 

 
<span></span>

這裏的fiddle

Answer 1

要做到這一點，你可以檢查相關元素的index()在if聲明。另請注意，each()聲明是多餘的。試試這個：

$(document).ready(function() { 
 
    $("li").click(function() { 
 
    var activeIndex = $('li.active').removeClass('active').index(); 
 
    var thisIndex = $(this).addClass('active').index(); 
 

 
    if (activeIndex < thisIndex) { 
 
     $("span").text("after active element"); 
 
    } else if (activeIndex > thisIndex) { 
 
     $("span").text("before active element"); 
 
    } else { 
 
     $('span').text('same element'); 
 
    } 
 
    }) 
 
})

li.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="active">Check 1</li> 
 
    <li>Check 2</li> 
 
    <li>Check 3</li> 
 
    <li>Check 4</li> 
 
</ul> 
 

 
<span></span>

Answer 2

你可以保存最近點擊的元素的index並將其與前一個比較。

$(document).ready(function(){ 
 
    var index = 0; 
 
    $('li').click(function(){ 
 
     $('li').removeClass("active"); 
 
     $(this).addClass("active"); 
 
     var res = $("li.active").index() > index ? 'after' : $("li.active").index() == index ? 'same' : 'before'; 
 
     index = $(this).index(); 
 
     console.log(res); 
 
    }) 
 
    })

li.active { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="active">Check 1</li> 
 
    <li>Check 2</li> 
 
    <li>Check 3</li> 
 
    <li>Check 4</li> 
 
</ul> 
 

 
<span></span>

Answer 3

你可以用指數嘗試，如果正確地理解你，這將解決問題： -

$(document).ready(function() { 
 
    var $li = $("li"); 
 
    $li.each(function() { 
 
    $(this).click(function() { 
 
     if ($("li.active").index()<$(this).index()) { 
 
     $("span").text("after clicked element"); 
 
     } else { 
 
     $("span").text("before clicked element"); 
 
     } 
 
     $li.removeClass("active"); 
 
     $(this).addClass("active"); 
 
    }) 
 
    }) 
 
})

li.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="active">Check 1</li> 
 
    <li>Check 2</li> 
 
    <li>Check 3</li> 
 
    <li>Check 4</li> 
 
</ul> 
 
<span></span>