替换内部HTML，排除某些元素

Question

如何在foo元素中将bar更改为#wrapper，但不要在pre > code内更改？

我尝试了下面显示的代码，但它无法正常工作：它会更改所有foo，无论它们位于何处。

$('#wrapper').children().not('pre > code').each(function() {
    $(this).html($(this).html()
        .replace(/foo/g, 'bar'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="wrapper">
    <p>foo</p>
    <p>foo</p>
    <p>foo</p>

    <pre style="white-space: pre-line;">
        <code>
            foo
            foo
            foo
        </code>
    </pre>

    <p>foo</p>
    <p>foo</p>
    <p>foo</p>

    <pre style="white-space: pre-line;">
        <code>
            foo
            foo
            foo
        </code>
    </pre>
</div>

Answer 1

问题在于.not('pre > code')排除<code>元素，但不排除<pre>个元素。最简单的解决方法是同时排除pre和pre > code。而不是使用children().not(...)，只使用一个选择器更简单：

＆＃13;

＆＃13;

$('#wrapper :not(pre):not(pre > code)').each(function() {
    $(this).html($(this).html()
        .replace(/foo/g, 'bar'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <p>foo</p>
    <p>foo</p>
    <p>foo</p>

    <pre style="white-space: pre-line;">
        <code>
            foo
            foo
            foo
        </code>
    </pre>

    <p>foo</p>
    <p>foo</p>
    <p>foo</p>

    <pre style="white-space: pre-line;">
        <code>
            foo
            foo
            foo
        </code>
    </pre>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

嗯，你可以检查元素是否是前一个。

＆＃13;

＆＃13;

$('#wrapper').children().each(function() {
    if (!$(this).is('pre'))
      $(this).html($(this).html().replace(/foo/g, 'bar'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <p>foo</p>
    <p>foo</p>
    <p>foo</p>

    <pre style="white-space: pre-line;">
        <code>
            foo
            foo
            foo
        </code>
    </pre>

    <p>foo</p>
    <p>foo</p>
    <p>foo</p>

    <pre style="white-space: pre-line;">
        <code>
            foo
            foo
            foo
        </code>
    </pre>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为这只是选择器问题。

将JavaScript的第一行更改为：

$('#wrapper').children(':not(pre)').each(function() {