Как отфильтровать по классу и значению атрибута?

Я использую JQuery 1.4.3Как отфильтровать по классу и значению атрибута?

У меня есть несколько входа, который выглядит следующим образом:

<input type='checkbox' id='1' class='Product' comp='1'> 
<input type='checkbox' id='2' class='Product' comp='1'> 
<input type='checkbox' id='3' class='Product' comp='1'> 
<input type='checkbox' id='4' class='Product' comp='2'> 
<input type='checkbox' id='5' class='Product' comp='2'> 
<input type='checkbox' id='6' class='Product' comp='2'>

Если коробка с классом продукта является щелкнула я хочу, чтобы получить его значение аккомпанемента и снимите остальные флажки которые имеют другое значение comp.

Обычно, я бы цикл через и проверять каждое значение компа, а затем снимите, где это необходимо, как этот псевдо-код:

ThisComp == 1 // comp value of checkbox that was just clicked 
$(".Product").each(function() { 
    var Comp $(this).attr("comp"); 
    if (ThisComp != Comp) { 
     // $(this).attr("checked", false); 
    } 
});

Я интересно, если есть способ фильтрации с использованием значения компа в селекторе , такие, как этот псевдо-код:

$(".Product comp=2").attr("checked", false);

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

источник

2012-02-07 Evik James

'значения id' не должно начинаться с цифры. –

Возможно, вы захотите переименовать этот атрибут в 'data-comp'. Атрибуты данных автоматически привязаны к 'element.dataset' и' .data() 'jQuery. –

http://api.jquery.com/category/selectors/

$(".Product[comp!='2']").attr("checked", false);

источник

2012-02-07 18:57:58

Я думаю, вы должны удалить пространство, или он будет искать элемент потомка. – interjay

Правильно, вы .. –

Поскольку код находится внутри обработчика кликов, мы можем ожидать, что значение this this ссылается на один из флажков. Поэтому глобальный запрос по страницам для элементов '.Product' не является разумным решением. –

Это должно работать:

$('.Product[comp="2"]').removeAttr("checked");

UPDATE

var comp = $(this).attr("comp"); 
$('.Product[comp="' + comp + '"]').removeAttr("checked");

источник

2012-02-07 19:00:08

Это на самом деле довольно легко. Тем не менее, недействительно создавать пользовательские атрибуты без использования данных- *. Вместо этого используйте data-comp. Еще одно небольшое примечание: кешируйте свой выбор и отфильтровывайте его для повышения производительности. Я рекомендую что-то вроде этого:

var $productChecks = $('.Product'); 
$productChecks.click(function() { 
    var compValue = $(this).attr('data-comp'); 
    $productChecks 
     // Uncheck boxes that don't have the same comp value 
     // Since checked is a boolean attribute, use prop to set 
     // Quote attribute value in selectors 
     .filter('[data-comp!="' + compValue + '"]').prop('checked', false).end() 
     // If desired, make sure the ones that have the same value are checked 
     .not(this).filter('[data-comp="' + compValue + '"]').prop('checked', true); 
});

http://api.jquery.com/prop

источник

2012-02-07 19:09:42 timmywil

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

Я думаю, что делегирование событий было бы более уместным, если было больше шести флажков. Это помогает с начальным временем выполнения, но медленнее, чем непосредственно связанный обработчик, но опять же, разница ничтожно мала в любом случае. – timmywil

Я не понимаю, почему это было бы медленнее. Почему вы так думаете? –

Как об этом:

$('#boxes').delegate('input:checkbox', 'click', function() { 
    var comp = +$(this).attr('comp'); 
    $(this).siblings().not('[comp="' + comp + '"]').prop('checked', false); 
});

Живая демонстрация:http://jsfiddle.net/BMtTy/

Или с данными-атрибутами:

$('#boxes').delegate('input:checkbox', 'click', function() { 
    var comp = +$(this).data('comp'); 
    $(this).siblings().not('[data-comp="' + comp + '"]').prop('checked', false); 
});

Живая демонстрация:http://jsfiddle.net/BMtTy/1/

источник

2012-02-07 19:13:08

Как отфильтровать по классу и значению атрибута?

ответ

Смежные вопросы