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

Question

Я хотел бы сделать следующее:

var theId = anId;

$('#someId .someClass[id=' + theId + ']').css('border-color', 'red');

... но с использованием переменной для "селекторной части":

var mySelector;

if(condition1){mySelector= $('#someId .someClass');}
if(condition2){mySelector= $('#anotherId .anotherClass');}

$.each(anArray, function(i, v) {
    mySelector[id=' + v.id + '].css('border-color', 'red'); 
});

(К сожалению, это не работает. Мне нужна помощь для исправления этого синтаксиса)

Я пробовал несколько синтаксисов, которые не работали. Надеюсь, кто-то может помочь. Заранее благодарю за ваши ответы. Приветствия. Марк.

Answer 1

После вашего редактирования, я думаю, вы должны сделать это:

var mySelector_string;
var theId = anId;

if(condition1){mySelector_string= '#someId .someClass';}
if(condition2){mySelector_string= '#anotherId .anotherClass';}

$.each(anArray, function(i, v) {
    $(mySelector_string+"[id='" + v.id + "']").css('border-color', 'red'); 
});

Answer 2

Я думаю, что в вашем вопросе есть несколько неправильно используемых терминов. Изучение их, вероятно, поможет вам исправить ваш код.

Экземпляр объекта jQuery: это объект JavaScript, который (помимо прочего) содержит, возможно, пустой внутренний массив узлов DOM, с которыми вы можете выполнять дальнейшие операции. Вы получаете его каждый раз, когда звоните jQuery() (возможно, с псевдонимом $()).

Селектор: Это строка JavaScript, которая представляет правило запроса CSS, например: "ul>li:first". Многие функции в jQuery, включая функцию jQuery(), принимают селекторы в качестве параметров и используют их для поиска или фильтрации узлов DOM в текущей цепочке.

Таким образом, у вас в основном есть строки и объекты, и оба являются обычными типами данных JavaScript и ведут себя как таковые. Вы можете, например, сохранить их в переменных или передать их в качестве аргументов функции. Вам просто нужно знать разницу между селектором CSS и найденными через него HTML-элементами.

Answer 3

Если ваш вопрос заключается в том, как вы можете кэшировать селектор, который динамически создается для повторного использования, тогда вы можете сделать следующее:

$("div p a " + someOtherSelectorRequirement).click(function(){ });

может стать

var a = $("div p a " + someOtherSelectorRequirement);
a.each(function(){ Console.Log($(this).text());
a.addClass("someClass");

если , вы спрашиваете, можете ли вы повторно использовать тот же селектор в объекте или переменной.

Answer 4

$('#someId .someClass #'+theId).css('border-color', 'red');

получит дочерний элемент .someClass с идентификатором theId

$('#someId .someClass#'+theId).css('border-color', 'red');

получит экземпляр .someClass с идентификатором theId