Question

好的，我为没有第一次发布完整的问题而道歉，我被社区打得非常糟糕，所以这是我的第二次尝试：

我的页面上的每篇文章都有一个UL的LI，我想使用JavaScript（jQuery）来获取我在LI中寻找的文本并将该文本作为类放到每个文章中，所以我可以过滤它们用jQuery Isotope。问题是我在每个LI中寻找的值需要拆分，到目前为止我尝试将值从整个UL中分离出来时失败了，我需要将空格转换成破折号等，所以我'我想我需要为LIs运行另一个函数，到目前为止所有的尝试都失败了。

我页面上一篇文章的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)

    });

}

所以我基本上在LIs的第二个函数中碰壁，我知道如何分割数据并获取第二个值，如果它只是一个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/

jQuery中的每个函数都在另一个jQuery中的每个函数中分离出要在第一个函数中使用的数据

1 个答案: