遍历每个元素，仅获取直接在节点中的内容 [英] Iterate over every element and get only the content that is directly in the node

问题描述

假设我有此代码

<p>FirstLevelP
    <span>SecondLevelSpan</span>
</p>
<p>FirstLevelP
    <span>SecondLevelSpan
        <p>ThirdLevelP</p>
    </span>
</p>

是否可以遍历我现在拥有的每个元素，但是只能获取内容，即位于其直接节点中，修改文本，然后将其包含在原始内容中?

Is it possible to iterate through every element that I have right now, but only get the content, that's in the direct node of it, modify the text and then have it in the original content?

例如，如果我遍历每个$('p').each并将其提取出来，我也将得到跨度内的文本.

Example, If I go through every $('p').each and would extract the text I would also get the text inside the span.

基本上是这样:

FirstelElement: FirstLevelPSecondLevelSpan
SecondElement: SecondLevelSpanSecondLevelSpanThirdLevelP

但是我想要这样

FirstelElement: FirstLevelP
SecondElement: SecondLevelSpan
ThirdElement: FirstLevelP
FourthElement: SecondLevelSpan
FifthElement: ThirdLevelP

这可能吗?

在我的研究中，我已经在这里找到了答案

In my research I already found this answer here

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

但这只能解决我一半的问题.我仍然需要修改原始内容中的文字！预先感谢大家.

But this would only solve half of my problems. I would still need to modify the text in the original content! Thanks in advance guys.

编辑说明

所以基本上，我想实现的目标是这样的:

So basically, want I want to achieve is something like this:

对于每个元素，我想检查最后是否有一个点.如果没有，我想添加一个.我已经设法做到了这样的标题:

For every element, I want to check if there is a dot at the end. If not I want to add one. I already managed to do this for headlines, like this:

foreach (pq($content)->filter(':header') as $headline) {
    if (substr(pq($headline)->text(), 0, -1) != '.') {
        $content = preg_replace('#(' . pq($headline) . ')#', pq($headline) . '.', pq($content));
    }
}

正如我所说，问题是，当我嵌套元素时，它将在整个元素之后添加点，而不是在必要时在每个子元素之后添加点.

The problem, as I stated, is, that when I have nested elements it would add the dot after the whole element, and not after each sub element if neccessary.

要使用我的假定"代码，它应该看起来像这样

To work with my "assumed" code, it should look like this

<p>FirstLevelP.
    <span>SecondLevelSpan.</span>
</p>
<p>FirstLevelP.
    <span>SecondLevelSpan.
        <p>ThirdLevelP.</p>
    </span>
</p>

但是不幸的是，目前看起来像这样

But unfortunatley, it currently looks like this

<p>FirstLevelP
    <span>SecondLevelSpan</span>.
</p>
<p>FirstLevelP
    <span>SecondLevelSpan
        <p>ThirdLevelP</p>
    </span>.
</p>

注意点.

推荐答案

修改，更新

尝试

    $("body *").each(function (i, el) {
        if ($(el).is("p, span")) {
            $(el).text(function (idx, text) {
               var t = text.split("\n")[0];
               // if `text` string's last character is not `.`
               // concat `.` to `text` string ,
               // return `text` original string's with `.` added
               return t.slice(-1) !== "." ? t + "." : t
            })
        }
    })

$("body *").each(function (i, el) {
        if ($(el).is("p, span")) {
            $(el).text(function (idx, text) {
               var t = text.split("\n")[0];
               return t.slice(-1) !== "." ? t + "." : t
            })
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>FirstLevelP
    <span>SecondLevelSpan</span>
</p>
<p>FirstLevelP
    <span>SecondLevelSpan
        <p>ThirdLevelP</p>
    </span>
</p>

这篇关于遍历每个元素，仅获取直接在节点中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！