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

Question

好的，我很抱歉第一次没有发布完整的问题，我被社区打败了，所以这是我的第二次尝试：

我的页面上的每篇文章都有一个 LI 的 UL，我想使用 JavaScript (jQuery) 来获取我在 LI 中查找的文本并将该文本作为类放入每篇文章中，这样我就可以过滤它们使用 jQuery 同位素。问题是我在每个 LI 中寻找的值需要被拆分出来，到目前为止，当我试图从整个 UL 中拆分出值时，我的尝试都失败了，我需要将空格转换为破折号等，所以我我想我需要为 LI 运行另一个 each 函数，到目前为止，所有尝试在这里也都失败了。

我页面上一篇文章的 HTML 示例：

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

jQuery：我需要在每个文章的循环中分别拆分每个 LI，到目前为止，我遇到了心理障碍，我不知道在哪里可以找到这种问题，我知道有一个这里的概念我还没有弄清楚，任何解释或提示都非常感谢！

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)

    });

}

所以我基本上在 LI 的每个函数的第二个就碰壁了，我知道如果它只是一个 LI，我知道如何拆分数据并获取第二个值，但是我如何在所有 LI 上将其作为循环运行并仅保留 split[1] 值。

我希望这是对我的问题的充分解释。我只是不知道这叫什么，做这样的事情，我很想知道！谢谢！

Answer 1

与其进行大量拆分，不如使用 RegExp 来隔离您想要的子字符串：

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(' '));
  });
};

请注意，在设置文章的类之前，我将空格转换为破折号，将句点转换为下划线。函数之后，文章类是这样的：isotope-item walnut-claro slab xxxx xx_xx xxx_xx 25-42 73-96 5

这里的JSFiddle：http://jsfiddle.net/ToddT/BCS2A/