0

我需要向列表的一个元素添加其他样式，具体取决于字符串是否与 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...')
  }
}
4

2 回答 2

1

您可以按方法循环 li 项目each，并使用 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>

于 2019-06-17T15:47:28.007 回答
0

只是为了解释导致问题的原因，您的问题在于这一行： $(categoryName).css('background', 'red') 这是将背景红色应用于与 categoryName 选择器匹配的每个元素，这是您的所有锚标记。您目前没有唯一标识不同 url 的类，请参阅https://stackoverflow.com/a/56634800/264607了解一种循环遍历 li 元素并将样式应用于正确元素的方法

于 2019-06-17T16:06:23.420 回答