Question

Sorry for dumb question but I can’t figure it out (beginner)

I have a UL-list with items like:

<div id="some_list"> 
<li ><a href="#">Hardware &ndash; HP Proliant DL145G2 AAA</a> 

How can I change OnClick the AAA to BBB?

I assume that the function should call $(document).ready, but I have no idea what should I do in function change_list.

<script type="text/javascript">
function change_list(aaa){
...
}
$(document).ready(function () {
    $('#some_list li a').click(change_list);
}); 

Answer 1

This is a good use for the function argument version of .text():

$('#some_list li a').click(function() {
    $(this).text(function(index, text) {
         return text.replace('AAA', 'BBB');
    });
});

The function argument versions of many jQuery functions are particularly appropriate for “read-modify-write” operations.

They avoid the need to write separate code to read the value, modify it, and then write the value back into the DOM.

The alternative would have looked like this:

$('#some_list li a').click(function() {
    var oldText = $(this).text();
    var newText = oldText.replace('AAA', 'BBB');
    $(this).text(newText);
});

Note how this now calls .text() twice – once to retrieve the value, and then again to write the new value.

As it happens in this case the savings aren’t great, but the method is particularly powerful when you want to modify things like attributes, or CSS values, etc, as it avoids a lot of code repetition.

The other advantage of the function argument method is that it allows you to separate logic from DOM manipulation. You can write trivial modification functions that only care about modifying strings, and leave jQuery to handle the DOM manipulation.