Replace each element in a list with jQuery

Question

Trying to replace (x) in a list element with <span>(x)</span> but i can't get it right, it's duplicating the first element

my code is:

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

BrunoLM · Accepted Answer · 2016-11-02 01:14:09Z

1

You probably want to get the single element, not all of them again when you try to replace the html. So instead of

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

Change to

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

Example (note I escaped the span tag just to make it easier to see the result)

$(function(){
  $(".widget_categories li").each(function () {
    var newValue = $(this).html().replace(/(\([^)]+\))/, "&lt;span&gt;$1&lt;/span&gt;");
    $(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>

edited Nov 2, 2016 at 1:14

answered Nov 2, 2016 at 1:01

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace each element in a list with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related