Styling certain values of an array

Question

I have an array of names, some of which get repeated. These names are later split in half then outputted into li. What I want and can not figure out is lets say I want the name Joeyc to have the styling text-decoration: line-through; appear on all of the .book which have joeyc printed in them. My code is below as well as a fiddle:

 <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/

juzraai · Accepted Answer · 2017-09-06 12:21:43Z

2

CSS selectors cannot select elements based on content, but with jQuery selectors you can do that:

$('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>

But maybe in your case that would be simpler to generate the HTML code itself with your script. Then you can easily add CSS styles/classes to the current element based on the current array item.

answered Sep 6, 2017 at 12:21

juzraai

5,9798 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rick · Accepted Answer · 2017-09-06 12:51:53Z

2

You can place an if condition and search for any <li> that contains the string you want.

After that, you can then use:

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

Then add a css class of your choice.

edited Sep 6, 2017 at 12:51

Rick

1,2351 gold badge20 silver badges29 bronze badges

answered Sep 6, 2017 at 12:30

Storm

566 bronze badges

Collectives™ on Stack Overflow

Styling certain values of an array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related