StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'd suggest:</p> <pre><code>$('span.class1.class2.class3').text(function(i, t){ /* i is in the index of the current element among those returned, t is the text of the current element. We return the new text, which is an asterisk, followed by the original text, with the asterisk removed (using replace to replace the asterisk with an empty string): */ return '*' + t.replace(/\*/,''); }); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qWU6T/" rel="nofollow">JS Fiddle demo</a>.</p> <p>If, however, you need a more generic approach (for example if you have multiple elements with the same/similar selectors):</p> <pre><code>// selects all the span elements, and filters: $('span').filter(function(){ // discards the elements that *don't* have '*:' in their text: return $(this).text().indexOf('*:') > -1; // iterates over those elements (as above): }).text(function(i, t) { return '*' + t.replace(/\*/,''); }); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qWU6T/1/" rel="nofollow">JS Fiddle demo</a>.</p> <p>In order to 'make it red,' you'd have to manipulate the HTML, rather than just the text, of the element:</p> <pre><code>$('span').filter(function(){ return $(this).text().indexOf('*:') > -1; // Using 'html()' to set the HTML of the 'span' element: }).html(function(i, h) { // creating a span and prepending to the current element return '<span class="required">*</span>' + h.replace(/\*/,''); }); </code></pre> <p>Coupled with the CSS:</p> <pre><code>.required { color: red; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qWU6T/2/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Further, for simplicity, given that you want to target the <code>*</code> with a class-name (and therefore wrap it in an element-node), you could avoid the string-manipulation and simply <code>float</code>:</p> <pre><code>$('span').html(function(i,h){ // simply wrapping the `*` in a span (using html() again): return h.replace(/(\*)/,'<span class="required">*</span>'); }); </code></pre> <p>With the CSS:</p> <pre><code>.required { float: left; color: red; } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/qWU6T/3/" rel="nofollow">JS Fiddle demo</a>.</p> <p>References:</p> <ul> <li><a href="http://api.jquery.com/filter/" rel="nofollow"><code>filter()</code></a>.</li> <li><a href="http://api.jquery.com/html/" rel="nofollow"><code>html()</code></a>.</li> <li><a href="http://api.jquery.com/text/" rel="nofollow"><code>text()</code></a>.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload