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>标签都不是其他同级标签的兄弟，我似乎无法弄清楚如何定位它。

出于可访问性和制表符的原因，我还需要在<a>中包含<li>。

感谢您的帮助！

Answer 1

您可以像这样使用next()。它获取所选元素的下一个同级。

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

编辑：如果您希望a具有leftBorder类，则可以使用closest，next和find定位下一个{{ 1}}。

a为我提供第一个与单击的closest相匹配的元素。 li next（紧随其后），然后li进入find内的a元素。

li

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

.leftBorder {
  color: red;
}

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;
}

这是我的第一篇文章，因此我向所有人致意，并谦虚地接受来自经验丰富的论坛成员的所有批评和评论。

当使用Jquery / JavaScript单击上一个列表项时，如何定位嵌套在列表项内的元素？

3 个答案: