使用查询跨越第一个字符答案

【问题标题】：span first character with query使用查询跨越第一个字符
【发布时间】：2014-05-22 15:53:17
【问题描述】：

灵感来自： jQuery match first letter in a string and wrap with span tag

我尝试跨越属于类拆分的每个 div 的第一个字符。 Atm 我有这个：

$(".split").each(function(index) {

    $(this).html(function (i, html) {   
        console.log(html);
        return html.replace(/^[^a-zA-Z'"<]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
    });

});

它记录这样的东西：

<p>De laatste eeuwen veranderen letters meer in details en niet meer in drastische vorm, de Garamond is al meer dan 400 jaar oud en wordt nog steeds gebruikt dus je zou kunnen zeggen dat de lettervorm hoe die nu is min of meer af is.</p>

所以我认为 是问题所在。

那么我怎样才能越过第一段元素呢？所以如果我记录html 它不会记录。

记住，我只想跨越 split 类的每个 div 的第一个字符。

【问题讨论】：

p 标签 always 是 .split 元素中的第一件事吗？如果是这样，您可以选择它。如果没有，您将不得不使用contents() 并递归循环遍历每个元素以获取第一个 textNode，并获取第一个字符。这并不简单:)

标签： jquery

【解决方案1】：

您似乎想包装没有子元素的第一个字符：

$(".split").each(function(index) {
  $(':not(:has(*))', this).html(function (i, html) {   
        return html.replace(/^[^a-zA-Z'"<]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
    });
});

Demonstration

由于我不确定您的目标，如果您不想更改所有段落而只想更改第一个段落，也许您想要':not(:has(*)):eq(0)'。

【讨论】：

谢谢。我需要eq(0)。像冠军一样工作！ :not(:has(*)) 有什么作用？我了解not，我了解has，但我不明白那条线。
@clankill3r 它获取的元素是 not (:not) having (:has)（即包含）任何元素 (@987654330 @)。
啊，如果我理解正确，没有    或任何其他 html 元素。

【解决方案2】：

您可以考虑使用 jQuery text() 代替 html 来获取没有 html 的文本。

但是当添加跨度并替换元素的 html 时， 将消失。如果您负担不起，那么您的另一种选择是，如果里面只有一个 ，则可以使用 $('p', '.split').each( ... ) 遍历 .split 元素中的 p。

【讨论】：