jQuery each function inside another jQuery each function to split out data to be used in the first each function

Question

Ok, I apologize for not posting the full question the first time, I got beat up pretty bad by the community so here's my second attempt:

I have a UL of LIs in each Article on my page, I want to use JavaScript (jQuery) to grab the text I am looking for in the LIs and drop that text into each Article as classes, so I can filter them with jQuery Isotope. The problem is that the value I am looking for in each LI needs to be split out, and so far my attempts have failed when trying to split the values out from the whole UL, I need to convert spaces into dashes etc, so I'm thinking I need to run another each function just for the LIs, so far all attempts have failed here as well.

Example HTML of one Article on my page:

<article id="post-136" class="isotope-item">
    <div class="entry-content">
        <div class="ct-custom-field-block">
            <ul>
            <li>
                <span>Species:</span> Walnut Claro</li>
            <li>
                <span>Product Type:</span> Slab</li>
            <li>
                <span>Tag Number:</span> xxxx</li>
            <li>
                <span>PN:</span> xxxx</li>
            <li>
                <span>BF:</span> xx.xx</li>
            <li>
                <span>Weight (lbs):</span> xxx.xx</li>
            <li>
                <span>Width (in):</span> 25-42</li>
            <li>
                <span>Length (in):</span> 73-96</li>
            <li>
                <span>Depth (in):</span> 5</li>
            </ul>
        </div>
    </div> <!-- .entry-content -->
</article>

The jQuery: I need to split out each LI separately within the loop for each Article, and so far I've hit a mental wall, I don't know where to look for this kind of question, I know there's a concept here I haven't figured out yet, any explanation or tip is much appreciated!

function prepareIso() {

    // loop on each <article>
    $('article').each(function() {

      // the list of data I need for this article
      var data = $(this).find('.ct-custom-field-block ul');

      // some amazing regex replace or split that can return each individual value I need, unfortunately I don't have a better solution than this replace chain, which doesn't give enough control to create classes with hyphens and remove irrelevant data
      // var dataHTML = data.html();
      // var outPut = dataHTML.replace("Species: ","").replace("Product Type:","").replace("Tag Number:","").replace("PN:","").replace("BF:","").replace("Weight (lbs):","").replace("Width (in):","").replace("Length (in):","").replace("Depth (in):","")

      // So I think I need another loop here, just for the LIs this time
        $(data).find('li').each(function() {
            $(this).html().split('</span> ')
            // ??? I am stuck here, I can split the LI's data but I don't know how to grab the second value and collect them into a string.
            var outPut = $(this)[1] // ??? trying to collect the second value after the split of each LI
            // I also need to run a regex replace in this loop to replace spaces with hyphens.
            // But, I need each "Class" to be separated by a space
            // Shouldn't have a problem stripping out the HTML elements
            // outPut should theoretically look something like this at this point
            // var outPut = 'Walnut-Claro Slab xxxx 25-42 73-96 5'
        });

        // now it's easy, just force the data to lower case and add as classes to the Article.
      var classesToAdd = outPut.toLowerCase();
      $(this).addClass(classesToAdd)

    });

}

So I've essentially hit a wall at the second each function for the LIs, I know how to split the data and grab the second value if it's just one LI, but how can I run that as a loop on all LIs and keep only the split[1] values.

I hope this is a sufficient explanation of my problem. I just don't know what this is called, doing something like this, I would love to know! Thank you!

Answer 1

Rather than doing a ton of splits, use RegExp to isolate the substrings that you want:

function prepareIso() {
  // loop on each <article>
  $('article').each(function() {
      var classList = [];

      // the list of data I need for this article
      var data = $(this).find('.ct-custom-field-block ul');

      $(data).find('li').each(function() {
          var text = this.innerText;
          text = text.replace(/^.*:\s/, '');
          console.log(text);
          classList.push(text.toLowerCase().replace(' ', '-').replace('.', '_'));
      });

      $(this).addClass(classList.join(' '));
  });
};

Note that I convert spaces to dashes and periods to underscores before setting the class on the article. After the function, the article class looks like this: isotope-item walnut-claro slab xxxx xx_xx xxx_xx 25-42 73-96 5

JSFiddle here: http://jsfiddle.net/ToddT/BCS2A/