如何在以前使用div的脚本中合并要调用的列表项？

Question

I have an unordered list that contains multiple list items (represented by green boxes).

Each list item contains a div called "titlebox" which you can see in my screenshot below. It says "Top Line Shorter Than Bottom".

Screenshot:

You can see how the top line is shorter than the bottom. This is done using the script posted below. However, this script calls on "titlebox" in order to work. Long story short, I updated my site to use list items instead of divs to produce the title, but simply substituting "titlebox" with "li" in the script doesn't produce the desired result.

Here is the code for the current list item (including titlebox div):

<li class="list__item2">
    <figure class="list__item__inner">  
    <p class="vignette" style="background-image:url(http://www.fakeimage.com/image.jpg)"></p>
    <div class="titlebox">Top Line Shorter Than Bottom</div>
       <div class="locationbox">Sample Title</div>
     <div class="pricebox">Sample Title</div>
</li>

and the script that makes top line shorter is:

 <script type='text/javascript'>
     $(document).ready(function() {
          $(".titlebox").each(function(){
  var len = $(this).text().length,
      words = $(this).text().split(" "),
      line1 = [],
      line2 = [],
      html = "";

  // iterate through each word in the title
  $.each(words, function(i,word){
    // if line 1's current length plus the length of this word
    // is less than half the total characters, add word to line 1
    // else add to line 2
    // (check index of word to maintain order)
    if((line1.join(" ")+" "+word).length < (len/2) && (i == line1.length)){
      line1.push(word);
    } else {
      line2.push(word);
    }
  });

  // concatenate the results with a '<br>' separating the lines
  html = line1.join(" ")+"<br>"+line2.join(" ");

  // replace the .titlebox content with this new html string
  $(this).html(html);
});
});
      </script>

But my NEW html code doesn't use titlebox div, instead it produces the list item (green box) using this code:

<div class="block2 personal fl">
        <h2 class="title"></h2>
            <div class="content">
                    <p class="price">
                       <p class="vignette" style="background-image:url(http://www.fakeimage.com/image.jpg)"></p>
                    </p>

             </div>

                <ul class="features">
                    <li>Top Line Shorter Than Bottom</li>
                    <li>Sample Title</li>
                    <li>Sample Title</li>

                </ul>
</div>

I want the line <li>Top Line Shorter Than Bottom</li> to be called on within the script posted above. How do I do this?

Thank you!

Answer 1

You need to change your javascript to select the proper element:

$(".features li:first-child").each(function(){...

OR, if you have access to update the HTML, you can add a class to your list item, in which case you don't need to update your javascript at all:

<ul class="features">
    <!-- add the class to the first list item -->
    <li class="titleBox">Top Line Shorter Than Bottom</li> 
    <li>Sample Title</li>
    <li>Sample Title</li>
</ul>

<script type='text/javascript'>
    $(document).ready(function() {
        $(".titlebox").each(function(){
  ...