javascript - JS 获取元素 html 和小写/连字符并作为类添加到父级

Question

我希望标题有意义，我正在尝试获取每个 li 元素中某个元素的 HTML，例如

<li><a class="title">Free Stuff</a></li> 

我正在尝试获取 html“Free Stuff”并将其小写，删除空格并添加一个连字符然后将其用作 li 上的类名，因此最终结果意味着 li 将是

<li class="free-stuff">

我希望这是有道理的。如果您想知道为什么我要使用 JS 来执行此操作，那是因为 wordpress 插件的性质导致我无法使用 php，并且不会为了更新目的而触及插件核心文件。

Answer 1

你可以这样使用:

$('li').addClass(function() {
  return $(this).text().toLowerCase().replace(" ", "-");
})

.free-stuff {
  color: blue
}
.expensive-stuff {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a class="title">Free Stuff</a>
  </li>
  <li><a class="title">Expensive Stuff</a>
  </li>
</ul>