2012-04-11 20 views
1

Sorry für dumme Frage, aber ich kann es nicht (Anfänger) herauszufinden, wie sie ändern Text zwischen <li><a></a></li>

Ich habe eine UL-Liste mit Artikeln wie:

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

Wie kann Ich ändere OnClick das AAA zu BBB?

Ich nehme an, dass die Funktion $ (Dokument) .ready aufrufen sollte, aber ich habe keine Ahnung, was ich in der Funktion change_list tun soll.

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

Sie haben ein 'ul' Element zwischen dem' div' und dem 'li', oder? –

Antwort

2

Dies ist eine gute Verwendung für die function argument Version von .text():

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

Die Funktion Argumente Versionen vielen jQuery-Funktionen sind besonders geeignet für "Read-Modify-Write" -Operationen.

Sie vermeiden die Notwendigkeit separaten Code zu schreiben, um den Wert lesen, es ändern, und dann schreiben den Wert wieder in das DOM.

Die Alternative wäre so ausgesehen haben:

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

Beachten Sie, wie diese .text() zweimal jetzt nennt - einmal, um den Wert abzurufen, und dann wieder um den neuen Wert zu schreiben.

Wie in diesem Fall ist die Einsparungen nicht groß, aber die Methode ist besonders leistungsfähig, wenn Sie Dinge wie Attribute oder CSS-Werte ändern möchten, da es eine Menge Code-Wiederholung vermeidet.

Der andere Vorteil der Funktionsargumentmethode besteht darin, dass Sie Logik von DOM-Manipulation trennen können. Sie können triviale Modifikationsfunktionen schreiben, die nur das Ändern von Strings betreffen, und jQuery für die Handhabung der DOM-Manipulation belassen.

+0

+1 Die Funktion Args werden zu oft übersehen. –

+0

Danke für deine Antwort, ich habe damit gespielt und ein Problem gefunden. Für _normal_ ASCII-Zeichenfolgen funktioniert Ihr Code. Wenn jedoch die Zeichenfolge, die ersetzt werden soll, eine HTML-Entität wie _f.e._ ♠ ist, tut es dies nicht. –

+0

@Kris_R versuchen Sie mit '.html()' anstelle von '.text()', dann. – Alnitak