如果span文本等于某些内容，如何才能将类添加到最近的li？

Question

我一直在研究一些jQuery代码，如果跨文本存在，它将为 li 添加一个类。这样它会为每个 li 添加一个不同的类。如果跨文本存在，如何将每个类添加到 li ？

这是我到目前为止所拥有的。

$(document).ready(function() {

  // Adds SPAN tags
  $('.menu > ul > li > a').each(function() {
    $(this.firstChild).wrap('<span></span>');
  });

  if ($('.menu > ul > li:first-child > a > span').text() == "Dashboard") {

    $('span:contains("dashboard")').closest("li").addClass('dashboard');
  } else {
    $('.menu > ul > li').addClass('Returns False'); // Added this for testing only
  }
  
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

The HTML currently looks like this

<div class="menu">
  <ul>
    <li><a class="user_menu_link_selected" href="#">Dashboard</a>
    </li>
    <li><a class="user_menu_link" href="#">Monitor</a>
      <li>
        <li><a class="user_menu_link" href="#">Admin</a>
        </li>
        <li><a class="user_menu_link" href="#">FTP</a>
        </li>
  </ul>
</div>

这就是我希望它看起来的方式

<div class="menu">
    <ul>
        <li class="dashboard"><a class="user_menu_link_selected" href="#"><span>Dashboard</span></a></li>
        <li class="monitor"><a class="user_menu_link" href="#"><span>Monitor</span></a><li>
        <li class="admin"><a class="user_menu_link" href="#"><span>Admin</span></a></li>
        <li class="ftp"><a class="user_menu_link" href="#"><span>FTP</span></a></li>
    </ul>
</div>

Answer 1

如果更改初始标记会更好。

但如果你不能，那么看起来类名与span的文本相同，所以

＆＃13;

＆＃13;

$(document).ready(function() {
  // Adds SPAN tags
  $('.menu > ul > li > a').wrapInner('<span></span>');

  $('.menu > ul > li').addClass(function() {
    return $(this).find('> a > span').text().trim().toLowerCase()
  })
});

＆＃13;

.menu li {
  margin-bottom: 5px;
}
.menu span {
  border: 1px solid red;
}
.dashboard {
  background-color: lightgrey;
}
.monitor {
  background-color: lightblue;
}
.admin {
  background-color: lightyellow;
}
.ftp {
  background-color: lightgreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
    <ul>
        <li><a class="user_menu_link_selected" href="#">Dashboard</a></li>
        <li><a class="user_menu_link" href="#">Monitor</a></li>
        <li><a class="user_menu_link" href="#">Admin</a></li>
        <li><a class="user_menu_link" href="#">FTP</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

---

如果关系不那么简单，那么使用键值对

＆＃13;

＆＃13;

$(document).ready(function() {
  // Adds SPAN tags
  $('.menu > ul > li > a').wrapInner('<span></span>');

  var map = {
    Dashboard: 'dashboard',
    Monitor: 'monitor',
    Admin: 'admin',
    FTP: 'ftp'
  }
  $('.menu > ul > li').addClass(function() {
    return map[$(this).find('> a > span').text().trim()]
  })
});

＆＃13;

.menu li {
  margin-bottom: 5px;
}
.menu span {
  border: 1px solid red;
}
.dashboard {
  background-color: lightgrey;
}
.monitor {
  background-color: lightblue;
}
.admin {
  background-color: lightyellow;
}
.ftp {
  background-color: lightgreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
    <ul>
        <li><a class="user_menu_link_selected" href="#">Dashboard</a></li>
        <li><a class="user_menu_link" href="#">Monitor</a></li>
        <li><a class="user_menu_link" href="#">Admin</a></li>
        <li><a class="user_menu_link" href="#">FTP</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;