Ускорение этого jQuery-кода с помощью селекторов

Question

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

В рамках функции фильтра я выбираю отмеченные переключатели для обеих групп / наборов:

if ( $('#filter input[name="interval"]:checked').val() == 'all' ) {
    if( $('#filter input[name="day"]:checked').val() == 'all' ) {
        var searchSelector = "li";
    } else {
        var searchSelector = "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";
    }
} else {
    if( $('#filter input[name="day"]:checked').val() == 'all' ) {
        var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]";
    } else {
        var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]" + "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";
    }
}

Как сказано в Правилах производительности jQuery я должен кэшировать объекты jQuery. Обычно эта практика всегда работает, но в этом случае значения моих вторых переключателей всегда выводят значение первого проверенного значения.

Есть идеи, как я могу упростить этот код jQuery?

СПАСИБО

Вот HTML-код для кнопок:

<form id="filter">
    <fieldset>
        <label>
            <input type="radio" name="interval" value="all">
            all</label>
        <label>
        <label>
            <input type="radio" name="interval" value="hourly">
            hourly</label>
        <label>
            <input type="radio" name="interval" value="daily">
            daily</label>
        <label>
            <input type="radio" name="interval" value="weekly">
            weekly</label>
        <label>
            <input type="radio" name="interval" value="monthly">
            monthly</label>
        <label>
            <input type="radio" name="interval" value="yearly">
            yearly</label>
    </fieldset>
    <fieldset>
        <label>
            <input type="radio" name="day" value="all">
            all</label>
        <label>
            <input type="radio" name="day" value="monday">
            monday</label>
        <label>
            <input type="radio" name="day" value="tuesday">
            tuesday</label>
        <label>
            <input type="radio" name="day" value="wednesday">
            wednesday</label>
        <label>
            <input type="radio" name="day" value="thursday">
            thursday</label>
        <label>
            <input type="radio" name="day" value="friday">
            friday</label>
    </fieldset>
</form>

И вот как выглядит мой список:

<li data-day="monday" data-interval="weekly">foo</li>
<li data-day="friday" data-interval="yearly">foo</li>

Answer 1

Следующие должны сделать это

var $interval = $('#filter input[name="interval"]'),
    $day = $('#filter input[name="day"]');

    $('#filter input:radio').change(function(){
        var interval = $interval.filter(':checked').val() || 'all',
            day = $day.filter(':checked').val()|| 'all',
            searchSelector = 'li';

            searchSelector += (day != 'all') ? '[data-day=' + day  + ']' : '';
            searchSelector += (interval != 'all') ? '[data-interval=' + interval  + ']' : '';
          }
        /*do what you want with the selector here*/
    });

пример: http://www.jsfiddle.net/gaby/xPMn5/

Answer 2

Почему бы не сделать что-то подобное - я предполагаю, что searchSelector применяется к .find() позже в коде, поскольку не определено ul для просмотра в ...

// This may also be $("li") -- I was assuming you were using it for a .find()
var $result = $something.find("li");
// This finds "all" the possible results - now to filter we need the values:
// Use || 'all' to default to "all" if there is no "checked" filter
var interval = $('#filter input[name="interval"]:checked').val() || 'all';
var day = $('#filter input[name="day"]:checked').val() || 'all';

// if we need to filter this list at all:
if (day != 'all' || interval != 'all') {
  // store the new result of the filter
  $result = $result.filter(function() {
    // check the .data-day .data-interval attributes on this directly:
    if (day != 'all' && this.data-day != day) return false;
    if (interval != 'all' && this.data-interval != interval) return false;
    return true;
  });
}

Я также предполагаю, что вы используете это, чтобы каким-то образом переключать видимость этих <li> ... В первой строке вы можете присоединить .hide() к цепочке и вызвать $results.show() в конце этого блокакод