Использование HTML-текста в качестве селектора для CSS с JS?

0

Я уверен, что другие спросили об этом, но я просто не могу найти что-нибудь, что мне помогает.

Посмотрите на этот код на jsfiddle.

И Person1, и Person2 имеют

class="from"

И селектор CSS имеет. От того, что он применяется к обоим, но я пытаюсь добиться того, что он применим только к Person1 с JavaScript/jQuery.

Я пробовал множество вещей, таких как

$( "span.from:contains('Person1')" )

без успеха. Как мне это сделать?

Помощь была бы очень признательна :)

  • 0
    В jQuery или просто CSS? Как насчет $('.from:eq(0)')
Теги:

5 ответов

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

$( "span.from:contains('Person1')") работает отлично. Но в css вы все равно затрагиваете все элементы с классом .from. После того, как вы получите элемент с Javascript, вы должны с ним что-то сделать, например, добавить новый класс и изменить css, чтобы анимация запускалась только в новом классе.

$( "span.from:contains('Person1')").addClass('newClass')

CSS:

.newClass{
    -webkit-animation: color-change 1s infinite;
    ...
}
Поделиться
  • 0
    уже дал этот ответ.
  • 0
    $("span.from:contains('Person1')") - это оригинальное решение OP, которое, по его словам, не работает, но работает. То, что он делает после того, как получает элемент, является тем, что имеет значение.
Показать ещё 2 комментария
1

В вашем случае вы можете использовать filter()

$("span.from").filter(function(){ return this.innerHTML == "Person1"; })

для удаления анимации элемента удалите класс из класса с помощью removeClass()

$("span.from").filter(function(){ 
     return this.innerHTML == "Person1"; 
}).removeClass('from');
Поделиться
  • 0
    Вы используете новый синтаксис JS?
  • 0
    @ComFreek: о, мне очень жаль
Показать ещё 4 комментария
0

Ваш код может работать

$("span.from:contains('Person1')").text()

Смотрите эту скрипку

Поделиться
  • 0
    Да, но Person2 по-прежнему использует CSS в вашей скрипке, и я пытаюсь сделать так, чтобы только Person1
  • 0
    Вы имеете в виду, что у Person2 нет класса from?
0

Если вы используете прямой CSS, вы должны выбрать только первый элемент, используя селектор nth-child:

.from:nth-of-type(1) { /* styles here */ }

Если вы хотите выбрать первый элемент через JS, вам просто нужно будет использовать eq(), чтобы захватить первый элемент по индексу. Это можно связать с цепочкой, поэтому вы можете продолжить установку CSS на этом элементе, подобном этому (поэтому в этом примере я добавляю дополнительный класс на первом.from, а также устанавливаю его цвет фона):

$(".from").eq(0).addClass("first-item").css("backgroundColor", "orange");
Поделиться
-1

Вы можете попробовать с .not()

$(".from:not(span:contains('Person2')):eq(0)")
Поделиться
  • 0
    не вернет ли это все элементы, кроме span с person2?
  • 0
    да, это будет ... для предотвращения того, что мы можем использовать '.eq ()' как '$ (". from: not (span: содержит (' Person2 ')): eq (0)")'
Показать ещё 1 комментарий

Ещё вопросы

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