Question

我有一系列名字，其中一些重复。这些名称后来被分成两半，然后输出到li。我想要的并且无法弄清楚的是，我希望名称Joeyc让样式text-decoration: line-through;出现在其中印有.book的所有joeyc上。我的代码在下面，也是一个小提琴：

 <div id="book1" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
    <div id="book2" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
    <div id="book3" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
    <div id="book4" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
    <div id="book5" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
    <div id="book6" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
      <div id="book7" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
      <div id="book8" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
      <div id="book9" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>
      <div id="book10" class="book">
       <ul class="hardcover_front">
        <li></li>
        <li></li>
      </ul>
       <ul class="hardcover_back">
        <li></li>
        <li></li>
      </ul>
       <ul class="book_spine">
      </ul>
     </div>


<script>
var votenames = ["Joeyc", "JakeP97", "Joeyc", "TheKid", "Joeyc", "TheKid", "Joeyc", "JakeP97", "ExploreMeDora", "Alvaro"];
var ballots = ["#book1", "#book2", "#book3", "#book4", "#book5", "#book6", "#book7", "#book8", "#book9", "#book10"];

function splitName(plName,ballotNum) {
    var halfplName = Math.round(plName.length / 2);
    var firstplName = plName.substr(0, halfplName);
    var lastplName = plName.substr(halfplName, plName.length);
    $(ballotNum + ' ul.hardcover_front').find('li:nth-child(2)').html(firstplName);
    $(ballotNum + ' ul.hardcover_back').find('li:nth-child(1)').html(lastplName);
}

for (i=0; i<ballots.length; i++) {
    splitName(votenames[i],ballots[i]);
}
</script>

https://jsfiddle.net/5m0qscch/

Answer 1

CSS选择器无法根据内容选择元素，但使用jQuery选择器可以做到：

$('li:contains("two")').css("text-decoration", "line-through");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<li>one</li>
<li>two</li>

但也许在您的情况下，使用您的脚本生成HTML代码本身会更简单。然后，您可以根据当前数组项轻松地将CSS样式/类添加到当前元素。

Answer 2

您可以放置GROUP BY条件并搜索包含所需字符串的任何if。

之后，您可以使用：

<li>

然后添加您选择的css类。

设置数组的某些值的样式

2 个答案: