Код jQuery для изменения цвета символа внутри имени метки Blogger

#jquery #colors #label #symbols #blogger

#jquery #Цвет #метка #символы #blogger

Вопрос:

Как я могу изменить цвет символа, включенного в имя метки в списке меток? Символ # . Я не могу использовать first-letter , потому что он окрашивает символ и первую букву. Могу ли я использовать код jQuery?

Это код списка меток:

 <b:loop values='data:labels where (l =amp;> l.name contains amp;quot;#amp;quot; and l.name not contains amp;quot;#39;amp;quot;)' var='label'> 
  <a expr:href='data:label.url'><data:label.name/></a><br/> 
</b:loop>

Ответ №1:

Может быть, что-то подобное может сработать?

Вам нужно отредактировать ссылку на ярлык, чтобы добавить, position:relative а затем с помощью jquery contain выполнить поиск, присутствует ли символ «#», и если он есть, скрипт добавит еще один символ «#» с классом, чтобы с помощью CSS мы могли изменить цвет и, что более важно, position: absolute так что это будетпомещается поверх исходного символа «#».

 $(".Label a:contains('#')").prepend('<div class="wrapper">#</div>');

 .Label a { 
  /*--/for testing purposes//-- */
  display: block;
  text-decoration: none;
  pointer-events: none;
  position: relative; /*Only this part must be added to Label a*/
}

.Label .wrapper {
  color: red;
  position: absolute;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="Label">
  <a href="#"># red</a>
  <a href="#">I green</a>
  <a href="#"># yellow</a>
  <a href="#">Not blue</a>
</div>

1. Спасибо за ваш ответ, но я не могу использовать это решение, потому что список написан не мной, а создан с помощью кода, который я опубликовал.

2. Извините. Я думал, у вас есть доступ к CSS. Мой ответ основан на том, что вам нужно только отредактировать CSS и добавить javascript, и, предполагая, что у вас уже есть jQuery, вы даже можете поместить оба в виджет HTML / Javascript… Нет необходимости редактировать HTML-часть или опубликованный вами код… Пример HTML, который я опубликовал в своем ответе, просто для того, чтобы показать вам, как это работает, запустив фрагмент кода. Я предполагал, что у вас есть доступ к CSS и jQuery, если это не так, я понятия не имею, как вам помочь. Извините.

3. У меня есть доступ к css, но список является результатом кода, а не списка, написанного мной

Ответ №2:

 .your_style {
    color: red;
}

 <div class='helper_container'>
    <b:loop values='data:labels where (l =amp;> l.name contains amp;quot;#amp;quot; and l.name not contains amp;quot;#39;amp;quot;)' var='label'>
        <a expr:href='data:label.url'><data:label.name/></a><br/>
    </b:loop>
</div>

 $('.helper_container a').each(function () {
    var a = $(this),
        a_txt = a.text();

    a.html(a_txt.replace(/^#/, "<span class='your_style'>#</span>"));
});

1. Спасибо за ваше время, но, к сожалению, это не работает, и я не знаю почему.

2. вы добавили helper_container div в качестве родительского элемента? вот скрипка jsfiddle.net/7gat2pq1

3. Да, но это не работает, я не знаю почему. Это сводит меня с ума!