Question

我需要将其他样式仅添加到列表的一个元素中，具体取决于字符串是否与url匹配。

此刻正在从列表和URL中的一个元素中标识一个唯一的字符串，然后将这两个字符串进行比较，并根据字符串是否相等添加样式，但是这样做是将样式应用于其中的所有元素列表。

结果应仅将样式添加到与url中的字符串匹配的元素。

<ul class="__filter--list--categoria" style="display: block;">
  <li class="__filter--list--item">
    <a class="__anchor" href="/t/cervezas">Cervezas</a>
    <ul>
      <li class="__filter--list--item">
        <a class="__anchor" href="/t/cervezas/nacionales" style="background: red;">Nacionales</a>
      </li>
      <li class="__filter--list--item">
        <a class="__anchor" href="/t/cervezas/internacionales" style="background: red;">Internacionales</a>
      </li>
      <li class="__filter--list--item">
        <a class="__anchor" href="/t/cervezas/artesanales" style="background: red;">Artesanales</a>
      </li>
    </ul>
  </li>
</ul>

var currentUrl = window.location.href.split('/')[5];
var categoryName = $('.__filter--list--categoria .__filter--list--item li .__anchor');
var categoryArray = [];

$(categoryName).each(function() {
  categoryArray.push($(this).text())
});

for (x = 0; x < categoryArray.length; x++) {
  var categoryString = categoryArray[x].toLowerCase();
  if (categoryString === currentUrl) {
    console.log('EQUAL...')
    $(categoryName).css('background', 'red')
  } else {
    console.log('NOT EQUAL...')
  }
}

Answer 1

您可以通过each方法循环li item，并使用testurl检查href

let testurl = '/t/cervezas/nacionales';
$('li').each(function(index,item){
  let href = $(item).find('a').attr('href');
  if(href == testurl){
     $(item).css('border', '1px solid green');
  }
})

let testurl = '/t/cervezas/nacionales';
$('li').each(function(index,item){
  let href = $(item).find('a').attr('href');
  if(href == testurl){
     $(item).css('border', '1px solid green');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="__filter--list--categoria" style="display: block;">
  <li class="__filter--list--item">
    <a class="__anchor" href="/t/cervezas">Cervezas</a>
    <ul>
      <li class="__filter--list--item">
        <a class="__anchor" href="/t/cervezas/nacionales" style="background: red;">Nacionales</a>
      </li>
      <li class="__filter--list--item">
        <a class="__anchor" href="/t/cervezas/internacionales" style="background: red;">Internacionales</a>
      </li>
      <li class="__filter--list--item">
        <a class="__anchor" href="/t/cervezas/artesanales" style="background: red;">Artesanales</a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

仅解释引起问题的原因，您的问题在于此行： $(categoryName).css('background', 'red') 这会将背景红色应用于与categoryName选择器（即所有锚标签）匹配的每个元素。您目前没有唯一标识不同网址的类，请参见https://stackoverflow.com/a/56634800/264607，以获取遍历li元素并将样式应用于正确网址的方法

如何仅将样式添加到ul列表的一个元素中

2 个答案: