Question

I have a global JS method that puts a * in front of every field marked as having class .fish-label

the code is:

var fishString = "<span class='fish-label'> * </span>";
$elements.each(function (index, value) {
            if ($(this).html().indexOf(fishString) != 0) {
                $(this).prepend(fishString);
            }
        });

This works in all browsers except for IE. IE capitalises injected HTML and also my quotes get mysteriously lost somewhere when I alert the html() value.

Is there a better, working way I can implement this? The idea is that if the function gets called twice, it won’t add two asterisks.

Answer 1

You can just search for the element like any other normal nested DOM element.

        var fishString = "<span class='fish-label'> * </span>";
        $elements.each(function() {
            if ($(this).children('span.fish-label').length === 0) {
                $(this).prepend(fishString);
            }
        });