當使用Jquery / JavaScript單擊上一個列表項時，如何定位嵌套在列表項內的元素？

Question

我有一個像這樣的無序列表：

<ul>
   <li><a class="foo" id="one">some text</a></li>
   <li><a class="foo" id="two">some text</a></li>
   <li><a class="foo" id="three">some text</a></li>
</ul>

我需要的是如果單擊id“ two”，則更改id“ three”的左邊框的顏色。 我知道我可以做這樣的事情：

function leftHighlight(e){
if (e.target.id == 'two')
{
    $('#three').addClass('leftBorder');
    $('#one').removeClass('leftBorder');
    $('#two').removeClass('leftBorder');

}

等等，但是當我有很長的列表項列表時，jQuery會變得很長。 有更簡潔的方法嗎？ 我在網上看到的所有內容都是用於同級選擇器，但是由於每個<a>標記都不是其他同級標記，因此我似乎無法弄清楚如何定位它。

另外出於可訪問性/制表符的原因，我還需要在<li>包含<a> 。

謝謝你的幫助！

Answer 1

您可以像這樣使用next() 。 它獲取所選元素的下一個同級。

https://api.jquery.com/next/

編輯：如果你想在a有leftBorder類，那么你可以使用closest ， next並find目標在下a 。

closest是第一個與li匹配的元素。 next是緊隨next的li ，然后find在li內獲取a元素。

 $('.foo').click(function(){ $('a').removeClass('leftBorder'); $(this).closest('li').next('li').find('.foo').addClass('leftBorder'); }); 

 .leftBorder { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><a class="foo" id="one">some text</a></li> <li><a class="foo" id="two">some text</a></li> <li><a class="foo" id="three">some text</a></li> </ul> 

Answer 2

您可以將jQuery next()方法（ https://api.jquery.com/next/ ）與parent() （ https://api.jquery.com/parent/ ）方法結合使用

$(e.target).parent().next().children('a').addClass('leftBorder')

Answer 3

由於OP允許使用純JavaScript，因此這是一個有效的（如果冗長的）JS代碼段：

const ids = Array.from(document.querySelectorAll('ul li .foo'));
// change selector to more specific if your HTML has more ul elements
const ul = document.querySelector('ul'); 

ul.addEventListener('click', function ulEventListener(ev) {

  let indexToHi = null;
  ids.forEach(function highlightLeft(el, ii) {

    if (indexToHi === null && el.id === ev.target.id) {
      indexToHi = ++ii;
      el.classList.remove('leftBorder') ;

    } else if (indexToHi !== null && ii === indexToHi) {
      el.classList.add('leftBorder') ;

    } else {
      el.classList.remove('leftBorder') ;
    };

  });

});

HTML，更改了鏈接文本以提供對id的清晰引用。

<ul>
   <li><a class="foo" id="zero">id zero</a></li>
   <li><a class="foo" id="one">id one</a></li>
   <li><a class="foo" id="two">id two</a></li>
</ul>

CSS：

.leftBorder {
  border-left : 2px solid red;
}

這是我的第一篇文章，因此我向所有人致意，並謙虛地接受來自經驗豐富的論壇成員的所有批評和評論。