一部の要素を除いて内部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の両方を除外することです。要素が前であればよく、あなただけチェックすることができ

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

<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>

Answer 2

：よりもむしろchildren().not(...)はそれだけで一つのセレクターを使用するように簡単です使用しています。

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

<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>

Answer 3

私は、これは単にセレクタの問題だと思います。

変更するには、JavaScriptの最初の行：

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