Question

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

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

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

<li class="free-stuff">

我希望这是有道理的。如果你想知道为什么我使用JS来做这个，因为我不能使用php，因为wordpress插件的性质，而不是为了更新目的接触插件核心文件。

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>

Answer 2

$('ul').children('li').each(function(i) {
     $(this).addClass($(this).children('a').text().toLowerCase().replace(' ', '-'));
});

Answer 3

上述解决方案适用于您的情况。但是，如果您有多个白色间隔的单词，则需要replaceAll，而不是替换。

如果您需要替换多个空格，可以执行以下操作。

＆＃13;

$('li').addClass(function() {
  var regEx = new RegExp(/ /, "g");
  return $(this).text().toLowerCase().replace(regEx, "-");
})

＆＃13;

.free-stuff {
  color: blue;
}
.more-free-stuff {
  color: green;
}
.expensive-stuff {
  color: red;
}

＆＃13;

<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">More Free Stuff</a>
  </li>
  <li><a class="title">Expensive Stuff</a>
  </li>
</ul>

＆＃13;

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

3 个答案: