Как получить элемент определенного значения ввода?

Question

У меня есть элемент .tousers, который является текстовым полем ввода со значением car.

if($("#compose-child-container-1").find(".tousers").val()=="car") { 

            } 

Я хочу addClass к этому .tousers элемента, но как я выбрать его?

Answer 1

Простым решением было бы искать в каждом элементе .tousers

$("#compose-child-container-1 .tousers").each(function() { 
    if($(this).val() == 'car') $(this).addClass('className'); 
}); 

Примечание:[value="car"] не будет работать для пользователей-модифицированных значений. Следовательно, цикл является практически единственным решением.

Answer 2

Использование $(this). В функции, вы должны использовать $(selector).each(function() { // code }

Answer 3

Попробуйте это:

$('#compose-child-container-1 .tousers').each(function() { 
    var el = $(this); 
    if (el.val() == 'car') { 
     el.addClass('found'); 
    } 
}); 

Answer 4

Здесь селектор атрибута не будет работать, так как только пользователь изменяет значение в поле ввода атрибут не обновляется, только элементы DOM свойство обновляется

что бы я сделал это

$("#compose-child-container-1").find(".tousers").filter(function(){ 
    return this.value == 'car' 
}).addClass('someclass') 

Answer 5

Я хотел бы использовать filter:

$("#compose-child-container-1 .tousers").filter(function() { 
    return this.value == "car"; 
}).addClass('found'); 

Это отделяет логику от поиска элементов из того, что вы на самом деле хотите с ними делать (addClass в этом случае).

Answer 6

$("#compose-child-container-1").find(".tousers").each(function(){ 
if($(this).val()=='car'){ 
$(this).addClass('className'); 
} 
}) 

Answer 7

Если вы уверены, что это самое один .tousers элемент:

var $_tousers = $('#compose-child-container-1 .tousers'); 
if ($_tousers.val() == 'car') $_tousers.addClass('found'); 

Если есть больше чем один, хотя, класс будет установлен на всех из них, если значение Первый из них является " автомобиль », независимо от ценностей других.

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

$.expr[':'].value = function(obj, index, meta, stack) { 
    console.log(meta); 
    var candidateValue = meta[3]; 
    return (candidateValue === $(obj).val()); 
}; 

... 

$('#compose-child-container-1 .tousers:value(car)').addClass('found'); 

Хотя для этого требуется создание нового селектора для проверки другого значения.

Или у вас может быть плагин.

$.fn.withVal = function(val) { 
    return this.filter(function() { return this.value == val; }); 
} 

... 

$('#compose-child-container-1 .tousers').withVal('car').addClass('found'); 

Примечание, простираясь JQuery (либо с помощью пользовательских селекторов или плагинов) только действительно стоит, если вы собираетесь хотите использовать его несколько раз.

Answer 8

Попробуйте это, это быстрый и чистый:

$("#compose-child-container-1").find(".tousers").filter(function() { 
    return this.value === 'car'; 
}).addClass('your-class');