Селектор друзей jQuery. С помощью фильтра jquery

#javascript #jquery #search #filter

#javascript #jquery #Поиск #Фильтр

Вопрос:

Я создал фильтр друзей jquery. У меня есть большой список ul с большим количеством имен друзей.

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

Когда вы нажимаете на друга, элемент li получает активный класс, который накладывает на него зеленый значок.

Здесь вы можете это увидеть: JSFiddle

Но теперь моя проблема.

Рядом со строкой поиска у меня есть ссылка под названием «Теперь выберите». Когда вы нажимаете на эту ссылку, я хочу показывать только те элементы li, которые имеют активный класс — с зеленым значком.

Я начинающий javascripter.

1. Мне очень жаль, но у меня возникли некоторые проблемы с пониманием. Что должно произойти, когда вы нажмете «Выбрать сейчас»? Исходя из контекста страницы, я предполагаю, что вы хотите выбрать (зеленая галочка, то же самое, что щелкнуть по ним) всех людей, которые в данный момент соответствуют запросу. Это правильно?

2. У вас в списке много людей. Когда вы нажимаете на элемент li. Чем выбран элемент li. Элемент li получает активный класс. Но это немного сломано и работает плохо. Это первая проблема. Когда вы нажимаете на элемент li. Элемент li должен получить активный класс. Когда вы нажмете на кнопку «Сейчас», выберите. Чем все элементы li, которые имеют активный класс, должны быть показаны. Элементы li, у которых нет активного класса, должны быть скрыты. Вы понимаете это?

3. Я исправил ваш английский, дайте мне знать, если это то, чего вы хотели.

Ответ №1:

Это то, чего хочет Майк

 $("#nowSel").click(function() {
    $("li:not(.active)").hide();
});

http://jsfiddle.net/mplungjan/n69Rm/

Возможно, с помощью теста

 $("#nowSel").click(function() {
  var selected = $("li .active");
  if (selected.length>0) {
    $("li:not(.active)").hide();
  }
  else {
   // tell user to select something
  }
});

Ответ №2:

Вот оно: http://jsfiddle.net/CBbH3/2 /

Возможно, его нужно немного переработать, но, короче говоря, для этого вам нужно использовать :visible filter:

 $('#now-select').click(function() {
        $(".friend-selection li:visible")
            .addClass("active")
            .append('<span class="check"></div>')
            .find(".check").fadeIn(150);

        return false;
    });

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

2. Я не понял этого, когда нажал «Now select». Чем должны отображаться элементы li с активным классом . Где это должно быть показано?

Ответ №3:

вы можете изменить эту строку

 <a href="#" title="Now Select" >Now Select<a>

Для

 <a href="#" title="Now Select" id ="nowselect">Now Select<a>

затем определите это.

 $("#nowselect").click(){

    var active =$.("li.active");
    //write your logic with active live
}