Warum führt jQuery diesen Code dreimal aus?

Question

Ich habe diese snippet:

jQuery(document).ready(function() { 
 
    //First bracket detection 
 
    var string = $.trim($('p').text()); 
 
    string = string.replace(/\(([^)]+)\)/, "<span>$1</span>"); 
 
    $('p').html(string); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> width (10mm) </p> 
 
<p> width (10mm) </p> 
 
<p> width (10mm) </p>

Wie Sie die Elemente dupliziert werden sehen können. Jeder Gegenstand erscheint 3 mal, wie kann ich es nur einmal machen?

Answer 1

Sie müssen .each() verwenden, um den Inhalt des Absatzes in seinem Kontext zu ersetzen.

jQuery(document).ready(function() { 
 
    $('p').each(function() { 
 
    //First bracket detection 
 
    var string = $.trim($(this).text()); 
 
    string = string.replace(/\(([^)]+)\)/, "<span>$1</span>"); 
 
    $(this).html(string); 
 
    }) 
 
});

span { 
 
    font-size: 30px; 
 
    color: green; 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>width (10mm)</p> 
 
<p>width (10mm)</p> 
 
<p>width (10mm)</p>