JQuery: найти элемент, класс содержит значение переменной

Question

теперь я искал высоко и низко, но я не могу понять, как получить эту работу:

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

Для лучшего понимания: это событие «щелчок» в галерее. Всякий раз, когда нажимается img, я ищу src, смотрю, какой номер содержит строку, а затем хочет найти соответствующий p, класс которого содержит тот же номер. Поэтому я могу манипулировать соответствующим текстом с изображением, которое в настоящее время отображается (так как плагин, который я использую, удаляет любой идентификатор или класс, я могу идентифицировать только изображение по его имени).

Пока это действительно работает, если я прямо поставил число в виде строки. Например:

var team_t = $(this).find("img").attr("src"); 

    for(n = 1; n <=6; n++){ 

      if(team_t.indexOf(n) != -1) 
      { 
       $('#text_content').find("p[class*='3']").css("background-color", "red"); 

      } 
    } 

Но вместо «3» я хочу, чтобы он получил число, которое имеет переменная n. Я пробовал это, но это не помогло:

$('#text_content').find("p[class*=' + n + ']").css("background-color", "red"); 

На самом деле это не сработало ни с какой переменной, которую я пытался передать. Я также видел и пробовал примеры, которые используют contains() или hasClass() и другие .. но ничего не работало для меня. Однако я не знаком с синтаксисом.

Как мне записать это, чтобы он принял переменную как строку?

Если я предупреждаю (n), он показывает правильный номер, так что это не проблема.

Answer 1

Вы были на правильном пути с конкатенацией, вы просто не получите весь путь за пределами строки:

$('#text_content').find("p[class*='" + n + "']").css("background-color", "red"); 
// Change is here -----------------^- and -^ 

В вашей попытке, + n + был еще во внешних кавычках, и так был используется буквально в селекторе (что приводит к сбою).

---

Тем не менее, если у вас есть какой-либо контроль над структурой DOM (но это звучит, как вы не можете), то, вероятно, лучший способ. Например, вы можете поместить атрибут data-* на элемент, который дает соответствующий селектор для элемента p (возможно, даже на id, но это всего лишь один вариант).

---

Вы также можете захотеть, чтобы закончить цикл, как только вы нашли индекс, поставив break; на линии после установки красного цвета линии.

---

Наконец: вы можете использовать класс для добавления красного цвета, а не для микширования презентации в код JavaScript.