Стиль строки в абзаце с идентификатором

0

У меня есть этот HTML:

<p>
   (rcvd)                           
<a href="linkhere">Title</a>
   by Person,                          
<br></br>
   - More text            
</p>

И я хочу изменить цвет (rcvd) на зеленый. Я попробовал следующее:

  1. Это изменяет всю строку на зеленый, но сохраняет ссылку

    $ ( "Р: содержит ( '(Rcvd)')") атр ( "стиль", "цвет: зеленый.");

  2. Это изменяет часть rcvd на зеленый, но удаляет ссылку Title

    $("p").each(function() {
    var text = $(this).text();
    text = text.replace("(rcvd)", "<span style='color:green;'>(rcvd)</span>");
    $(this).html(text);
});

  3. Это ничего не делает, но я думаю, что это решение, которое я хочу с небольшой настройкой где-то, что мне не хватает

    $(p).html($(p).html().replace("(rcvd)","<span style='color:green;'>(rcvd)</span>"));

Любые указатели приветствуются (я все еще новичок в JQuery и стараюсь учиться, поэтому мне хотелось бы объяснить, почему вы делаете предложение, которое вы делаете.

Теги:

4 ответа

4
Лучший ответ

Мое собственное предложение было бы:

$('p').html(function(i,h){
    return h.replace('(rcvd)', '<span class="greenColoured">(rcvd)</span>');
});

Использование CSS для обеспечения стиля:

.greenColoured {
    color: green;
}

Демо-версия JS Fiddle.

Как отметил TrueBlueAussie (в комментариях ниже), я не объяснил параметры анонимной функции, переданной методу html(): function(i, h):

Метод html() существу выполняет итерацию по коллекции, возвращаемой селектором (в этом случае по всем выбранным абзацам); без использования анонимной функции каждый элемент p имел бы тот же набор HTML. Используя эту функцию, с i и v (которая может быть названа, однако, пожалуйста, вы можете получить доступ к индексу (i) текущего итератируемого элемента среди коллекции, а v (второй параметр) возвращает текущее значение 'value' (в этом случае существующий innerHTML текущего узла повторяется).

Как уже отмечалось, эти параметры можно назвать любыми, что вам нравится, для меня i и h являются привычными (i для "index" и h для HTML в этом случае); если вы помните, что (как и многие другие анонимные функции, переданные методам jQuery), первым является индекс, а второй - текущим значением.

Рекомендации:

Поделиться
  • 0
    Можете ли вы объяснить использование функции в качестве параметра для html () для непосвященных? например, api.jquery.com/html/#html-functionindex--oldhtml . Пока это мой любимый ответ (и вы использовали класс вместо встроенных цветов, хотя имя класса должно отражать атрибут «oktogo», а не реализацию «green»).
  • 0
    Спасибо, что сделали свое дело!
Показать ещё 2 комментария
3

Это выберет первый узел внутри P (который является текстовым узлом) и будет стилизовать его:

$("p").contents().first().wrap("<span style='color:green'></span>");

Демо: http://jsfiddle.net/jrAWn/

ОБНОВЛЕНО. Хорошо, и это использует класс:

.rStyle {
   color:green;     
}

$("p").contents().first().wrap("<span/>").parent().addClass("rStyle");
Поделиться
  • 1
    Ну, это хороший фрагмент - не знал, что contents() существует - кажется великолепным
  • 0
    Стиль принадлежит CSS ... установите класс вместо жестких цветов.
Показать ещё 4 комментария
0

Попробуйте обменивать имена тегов в кавычках (jsFiddle):

$("p").html($("p").html().replace("(rcvd)","<span style='color:green;'>(rcvd)</span>"));

На данный момент вы передаете переменную p функции jQuery. Предположительно p не определено, поэтому вы либо получаете ошибку Javascript, либо просто пустой объект jQuery.

Как говорили другие, стандартный способ сделать это - обернуть rvcd в промежутке:

<p>
   <span class="style-this">(rcvd)</span>                           
<a href="linkhere">Title</a>
   by Person,                          
<br></br>
   - More text            
</p>

А также

$(".style-this").css("color", "green");
Поделиться
  • 0
    Стиль принадлежит CSS ... установите класс вместо жестких цветов. Тогда это будет чище и получит мой голос.
  • 0
    Хотя я согласен с этим ответом, я работаю в системе, где не могу управлять HTML таким образом, я должен работать в рамках того, что предоставляет система. Спасибо!!
0

Используйте css() и дайте тегу <p> класс:

<p id="myGreenClass">(rcvd)</p>

И этот код jQuery:

$('.myGreenClass').css('color', 'green');
Поделиться
  • 0
    (Rcvd) является только частью абзаца, поэтому это не сработает. Вы сделаете ссылку и оставшийся текст зеленым, а также ... нуждаетесь в определенном тексте.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню