Заменить каждый элемент в списке с JQuery

Question

Попытка заменить (х) в элементе списка с <span>(x)</span>, но я не могу получить это право, это дублирует первый элемент

мой код:

jQuery(document).ready(function($){ 
"use strict"; 
$(".widget_categories li").each(function(){ 
    $(this).html($(".widget_categories li").html().replace(/(\([^)]+\))/, "<span>$1</span>")); 
}); 
}); 

Answer 1

Возможно, вы захотите получить единственный элемент, а не все из них, когда вы попытаетесь заменить html. Таким образом, вместо

$(this).html($(".widget_categories li").html().replace(/(\([^)]+\))/, "<span>$1</span>")); 

Изменения к

$(this).html($(this).html().replace(/(\([^)]+\))/, "<span>$1</span>")); 

примера (обратите внимание, я избежала span тега только, чтобы сделать его легче увидеть результат)

$(function(){ 
 
    $(".widget_categories li").each(function() { 
 
    var newValue = $(this).html().replace(/(\([^)]+\))/, "<span>$1</span>"); 
 
    $(this).html(newValue); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="widget_categories"> 
 
    <li>foo (x) bar</li> 
 
</ul>