Question

I had working script based on id attribute. As I’m having many issues, decided to use class attribute with jQuery. But I’m not successful with the following script (I’m bad at scripting 🙁 )

It’ll be great if you expert can suggest me the better way. I have more than 300 words to replace with symbols (about 200 pages).

thanks a lot.

HTML code

 <script src="http://code.jquery.com/jquery-latest.js"></script>

 <input type="submit" name="replace" id="replace" value="Replace" />
 <div class="my_div">Default content</div>
 <div class="my_div">Default content 2</div>

java script

$('#replace').click(function() {
     var str=document.getElementByClassName("my_div").innerHTML;
     var n=str.replace("default","somesymbol");
     var n=str.replace("content","somesymbol");
     var n=str.replace("im","somesymbol");
     document.getElementByClassName("my_div").innerHTML=n;
    }

Answer 1

Using jQuery html() method if you use a function as it’s argument it will loop over the whole collection of elements with the class name , automatically give you access to the existing html and replace it if you return html string

$('#replace').click(function() {
    $('.my_div').html(function( idx, oldHtml){
    /* if you need access to other properties or attributes of element -"this" or "$(this)" within this function*/
           return oldHtml.replace(/default|content|im/gi, 'somesymbol');
    });
});

Reference: http://api.jquery.com/html/

Look down API page to section added in jQuery version 1.4