设计某个数组的某些值

我有一个名称数组，其中一些重复。这些名字后来分成一半，然后输出到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/

来源

2017-09-06 EGxo

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>

但是在你的情况下，使用scr可以更简单地生成HTML代码本身IPT。然后，您可以基于当前数组项目，轻松地将CSS样式/类添加到当前元素。

来源

2017-09-06 12:21:43 juzraai

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

之后，你就可以使用：

document.getElementById("myelement").classList.add("myclass");

添加您选择的CSS类。

来源

2017-09-06 12:30:59 Storm

设计某个数组的某些值

回答

相关问题