Как я могу добавить некоторый HTML к элементу, а затем проверить, был ли добавлен HTML?

#jquery

Вопрос:

У меня есть глобальный метод JS, который ставит * перед каждым полем, помеченным как имеющий class .fish-label

код:

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

Это работает во всех браузерах, кроме IE. IE использует введенный HTML, а также мои кавычки таинственным образом теряются где-то, когда я предупреждаю значение html().

Есть ли лучший, рабочий способ, которым я могу это реализовать? Идея в том, что если функция вызывается дважды, она не добавит две звездочки.

Ответ №1:

Вы могли filter бы из набора элементов исключить те, у которых уже есть a .fish-label , и добавить один к оставшимся элементам:

 var fishString = "<span class='fish-label'> * </span>";
$elements.filter(function() {
    return !$(this).has(".fish-label").length;
}).prepend(fishString);

Вот рабочий пример.

Ответ №2:

Вы можете просто выполнить поиск элемента, как и любого другого обычного вложенного элемента DOM.

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

Ответ №3:

Для этого вы также можете обойтись без js. Например, если метка, подобная первой для каждого элемента, вы можете использовать следующий оператор:

HTML

 <label class="required" for="username">Username</label>
<input id="username" type="text" value="" name="username">

css

 label.required:after {
    content: " *";
}

ДЕМОНСТРАЦИЯ

Ответ №4:

Если это только для пользовательского интерфейса, вы можете использовать функциональность CSS:

 .fish-label:before {
    content: "* ";
}

Смотрите пример работы здесь: http://jsfiddle.net/mikhailov/7vxb5/1 /