如果第一项的第一个字母不以连字符开头，则尝试正确添加元素答案

【问题标题】：Trying to properly prepend an element if the first letter of the first item doesn't start with a hyphen如果第一项的第一个字母不以连字符开头，则尝试正确添加元素
【发布时间】：2020-05-23 12:13:54
【问题描述】：

我正在尝试查看每个文章类别的第一个项目的第一个字母是否以连字符开头，如果不是，则在第一个项目之前添加元素（或者换句话说，将元素添加到项目父项）。我在另一个关于检测项目是否以连字符开头的问题上得到了一些帮助，我想我可以找出其余的，但我失败了。

HTML：在下面删除、更新和添加。

jQuery：在下面删除、更新和添加。

我收到一个错误Unexpected identifier。 已修复，由错字引起

几个小时以来我一直在尝试各种事情，其他尝试最终只是将元素添加到每篇文章中，即使它已经有一个带有连字符的项目。

事后看来，我想它是否是“第一项”并不重要，但必须是第一个字母。我只是想我会尝试这样做以防万一。如果文章中的任何项目 > post-header > post-category-label 以连字符开头，那么真正重要的是，如果不是，则添加元素。

换句话说，类别定义为以连字符开头的项目，如果类别不存在，则添加一个（<span class="item">-Uncategorized</span>）。但是，只有第一项可以作为类别可见，所以 -Uncategorized 必须是第一项。

希望我没有迷惑任何人。

在我看来，我使用的 jQuery 应该可以工作，但不能。我们如何正确地做到这一点？

编辑： 修正了修正错误的错字。但是，现在脚本将元素添加到每篇文章，而不仅仅是需要它的文章。

编辑：我写的第一个示例html没有重复问题，所以下面我从源代码复制粘贴，但编辑了一些数据以便可以重复问题。

HTML：

<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
  <div class="post-header">
    <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
      <time class="featured-image-timestamp" itemprop="datePublished">
        <span class="featured-image-timestamp-month">Dec</span>
        <span class="featured-image-timestamp-day">03</span>
      </time>
      <div class="featured-image-category">
        <span class="item">
          -Technology
        </span>
        <span class="item">
          add-snow
        </span>
        <span class="item">
          blogging
        </span>
        <span class="item">
          blogspot
        </span>
        <span class="item">
          feature
        </span>
        <span class="item">
          test
        </span>
      </div>
      <canvas class="add-snow" width="751" height="423"></canvas>
    </a>
    <a name="8075834726885144989"></a>
    <h1 class="post-title entry-title" itemprop="headline">
      <span>
        <a href="#">Article One</a>
      </span>
    </h1>
    <div class="post-info">
      post-info
    </div>
  </div>
  <div class="post-body entry-content float-container">
    body content
  </div>
  <div class="post-footer">
    footer content
  </div>
</article>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
  <div class="post-header">
    <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
      <time class="featured-image-timestamp" itemprop="datePublished">
        <span class="featured-image-timestamp-month">Dec</span>
        <span class="featured-image-timestamp-day">02</span>
      </time>
      <div class="featured-image-category">
        <span class="item">
          add-prank
        </span>
        <span class="item">
          add-snow
        </span>
        <span class="item">
          blogging
        </span>
        <span class="item">
          blogspot
        </span>
        <span class="item">
          feature
        </span>
        <span class="item">
          test
        </span>
      </div>
      <canvas class="add-snow" width="751" height="423"></canvas>
    </a>
    <a name="8075834726885144989"></a>
    <h1 class="post-title entry-title" itemprop="headline">
      <span>
        <a href="#">Article Two</a>
      </span>
    </h1>
    <div class="post-info">
      post-info
    </div>
  </div>
  <div class="post-body entry-content float-container">
    body content
  </div>
  <div class="post-footer">
    footer content
  </div>
</article>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
  <div class="post-header">
    <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
      <time class="featured-image-timestamp" itemprop="datePublished">
        <span class="featured-image-timestamp-month">Dec</span>
        <span class="featured-image-timestamp-day">01</span>
      </time>
      <div class="featured-image-category">
        <span class="item">
          -Technology
        </span>
        <span class="item">
          blogging
        </span>
        <span class="item">
          blogspot
        </span>
        <span class="item">
          feature
        </span>
        <span class="item">
          test
        </span>
      </div>
      <canvas class="add-snow" width="751" height="423"></canvas>
    </a>
    <a name="8075834726885144989"></a>
    <h1 class="post-title entry-title" itemprop="headline">
      <span>
        <a href="#">Article Three</a>
      </span>
    </h1>
    <div class="post-info">
      post-info
    </div>
  </div>
  <div class="post-body entry-content float-container">
    body content
  </div>
  <div class="post-footer">
    footer content
  </div>
</article>

jQuery

$('.featured-image-category').each(function() {
  $('.featured-image-category .item:first-of-type').filter((index, item) => item.innerHTML.split('')[0] !== '-').parent().prepend('<span class="item">-Uncategorized </span>');
});

另外，这里有一个说明问题的 jsFiddle：link

【问题讨论】：

标签： jquery

【解决方案1】：

您可以通过遍历所有 :first-child 并使用 .text() 然后使用 .trim() 获取文本来实现这一点，因为标签文本可能包含空格字符，因此检索到的元素文本，并且要获取第一个字符，您可以使用 @ 987654323@ 方法，然后我们在 if 语句中使用该值来检查第一个字符是否为-，这是一个有效的 sn-p：

$('.featured-image-category .item:first-child').each(function() {
  if($(this).text().trim().charAt(0) !== '-') {
    $(this).prepend('<span class="item">-Uncategorized </span>');
  }
})

.add-snow {
  height: 0px;
}

article {
 outline: 1px solid #cfcfcf;
 padding: 10px;
}


article:nth-child(even) {
  background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
    <div class="post-header">
        <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
            <time class="featured-image-timestamp" itemprop="datePublished">
                <span class="featured-image-timestamp-month">Dec</span>
                <span class="featured-image-timestamp-day">03</span>
            </time>
            <div class="featured-image-category">
                <span class="item">
                    -Technology
                </span>
                <span class="item">
                    add-snow
                </span>
                <span class="item">
                    blogging
                </span>
                <span class="item">
                    blogspot
                </span>
                <span class="item">
                    feature
                </span>
                <span class="item">
                    test
                </span>
            </div>
            <canvas class="add-snow" width="751" height="423"></canvas>
        </a>
        <a name="8075834726885144989"></a>
        <h1 class="post-title entry-title" itemprop="headline">
            <span>
                <a href="#">Article One</a>
            </span>
        </h1>
        <div class="post-info">
            post-info
        </div>
    </div>
    <div class="post-body entry-content float-container">
        body content
    </div>
    <div class="post-footer">
        footer content
    </div>
</article>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
    <div class="post-header">
        <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
            <time class="featured-image-timestamp" itemprop="datePublished">
                <span class="featured-image-timestamp-month">Dec</span>
                <span class="featured-image-timestamp-day">02</span>
            </time>
            <div class="featured-image-category">
                <span class="item">
                    add-prank
                </span>
                <span class="item">
                    add-snow
                </span>
                <span class="item">
                    blogging
                </span>
                <span class="item">
                    blogspot
                </span>
                <span class="item">
                    feature
                </span>
                <span class="item">
                    test
                </span>
            </div>
            <canvas class="add-snow" width="751" height="423"></canvas>
        </a>
        <a name="8075834726885144989"></a>
        <h1 class="post-title entry-title" itemprop="headline">
            <span>
                <a href="#">Article Two</a>
            </span>
        </h1>
        <div class="post-info">
            post-info
        </div>
    </div>
    <div class="post-body entry-content float-container">
        body content
    </div>
    <div class="post-footer">
        footer content
    </div>
</article>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
    <div class="post-header">
        <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
            <time class="featured-image-timestamp" itemprop="datePublished">
                <span class="featured-image-timestamp-month">Dec</span>
                <span class="featured-image-timestamp-day">01</span>
            </time>
            <div class="featured-image-category">
                <span class="item">
                    -Technology
                </span>
                <span class="item">
                    blogging
                </span>
                <span class="item">
                    blogspot
                </span>
                <span class="item">
                    feature
                </span>
                <span class="item">
                    test
                </span>
            </div>
            <canvas class="add-snow" width="751" height="423"></canvas>
        </a>
        <a name="8075834726885144989"></a>
        <h1 class="post-title entry-title" itemprop="headline">
            <span>
                <a href="#">Article Three</a>
            </span>
        </h1>
        <div class="post-info">
            post-info
        </div>
    </div>
    <div class="post-body entry-content float-container">
        body content
    </div>
    <div class="post-footer">
        footer content
    </div>
</article>

【讨论】：

【解决方案2】：

$('.post-category-label').each(function() {
  $('.post-category-label .item:first-of-type').filter((index, item) => item.innerHTML.split('')[0] !== '-').parent().prepend('<span class="item">-Uncategorized </span>');
});

你在“parent()”之前少了一个点

【讨论】：

这是一个错字，但使用此脚本，它会将元素添加到每篇文章中，而不仅仅是需要它的文章。
我在 jsfiddle 中尝试了您的代码，它似乎按预期工作？ jsfiddle.net/kazuryo/cj56m7uq 除非我误解了你的问题
是的，我可以确认它在小提琴中按预期工作。我只是想弄清楚为什么它会在我的模板中的每篇文章中添加元素。谢谢。
我更新了 HTML 示例以显示将元素添加到每篇文章的问题，而不仅仅是需要它的文章。这是主要问题。 jsfiddle.net/m76buL31/3

【解决方案3】：

问题是您正在使用innerHTML 获取跨度内容。如果不使用.trim()，它也会包含空格。因此，您可以在.split() 之前应用.trim() 或使用innerText。

可能最好使用.trim() 来确保删除空格（至少在字符串的开头）并且您可以检查连字符。

这是一个例子：

$('.featured-image-category').each(function() {
  $('.featured-image-category .item:first-of-type').filter((index, item) => {
    /* These will work too
     return item.innerText.indexOf("-") != 0
     return item.innerHTML.trim().split('')[0] !== '-';
    */
    return item.innerText.trim().split('')[0] !== '-';
  }).parent().prepend('<span class="item">-Uncategorized</span>');
})

a {
  text-decoration: none;
}

article {
  border: 1px solid red;
  margin-bottom: 16px;
}

h1 {
  margin: 0;
}

canvas {
  width: 0;
  height: 0;
}

time {
  display: block;
  margin-bottom: 16px;
}

.item {
  margin-right: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
  <div class="post-header">
    <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
      <time class="featured-image-timestamp" itemprop="datePublished">
        <span class="featured-image-timestamp-month">Dec</span>
        <span class="featured-image-timestamp-day">03</span>
      </time>
      <div class="featured-image-category">
        <span class="item">
          -Technology
        </span>
        <span class="item">
          add-snow
        </span>
        <span class="item">
          blogging
        </span>
        <span class="item">
          blogspot
        </span>
        <span class="item">
          feature
        </span>
        <span class="item">
          test
        </span>
      </div>
      <canvas class="add-snow" width="751" height="423"></canvas>
    </a>
    <a name="8075834726885144989"></a>
    <h1 class="post-title entry-title" itemprop="headline">
      <span>
        <a href="#">Article One</a>
      </span>
    </h1>
    <div class="post-info">
      post-info
    </div>
  </div>
  <div class="post-body entry-content float-container">
    body content
  </div>
  <div class="post-footer">
    footer content
  </div>
</article>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
  <div class="post-header">
    <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
      <time class="featured-image-timestamp" itemprop="datePublished">
        <span class="featured-image-timestamp-month">Dec</span>
        <span class="featured-image-timestamp-day">02</span>
      </time>
      <div class="featured-image-category">
        <span class="item">
          add-prank
        </span>
        <span class="item">
          add-snow
        </span>
        <span class="item">
          blogging
        </span>
        <span class="item">
          blogspot
        </span>
        <span class="item">
          feature
        </span>
        <span class="item">
          test
        </span>
      </div>
      <canvas class="add-snow" width="751" height="423"></canvas>
    </a>
    <a name="8075834726885144989"></a>
    <h1 class="post-title entry-title" itemprop="headline">
      <span>
        <a href="#">Article Two</a>
      </span>
    </h1>
    <div class="post-info">
      post-info
    </div>
  </div>
  <div class="post-body entry-content float-container">
    body content
  </div>
  <div class="post-footer">
    footer content
  </div>
</article>
<article class="article" id="article-0" itemscope="" itemtype="https://schema.org/Article">
  <div class="post-header">
    <a class="featured-image-link" href="#" id="featured-image-link-0" itemprop="thumbnailUrl">
      <time class="featured-image-timestamp" itemprop="datePublished">
        <span class="featured-image-timestamp-month">Dec</span>
        <span class="featured-image-timestamp-day">01</span>
      </time>
      <div class="featured-image-category">
        <span class="item">
          -Technology
        </span>
        <span class="item">
          blogging
        </span>
        <span class="item">
          blogspot
        </span>
        <span class="item">
          feature
        </span>
        <span class="item">
          test
        </span>
      </div>
      <canvas class="add-snow" width="751" height="423"></canvas>
    </a>
    <a name="8075834726885144989"></a>
    <h1 class="post-title entry-title" itemprop="headline">
      <span>
        <a href="#">Article Three</a>
      </span>
    </h1>
    <div class="post-info">
      post-info
    </div>
  </div>
  <div class="post-body entry-content float-container">
    body content
  </div>
  <div class="post-footer">
    footer content
  </div>
</article>

【讨论】：