Блог

Я читал о плагине для выбора пользовательского интерфейса Jquery, мой вопрос:

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

Спасибо!

РЕДАКТИРОВАТЬ: Спасибо за ваши ответы, однако я вижу, что я не очень хорошо это объяснил: пользователь может выбрать (ctrl click) более одного элемента в списке с помощью плагина Jquery UI selectable. Я хочу ограничить это, чтобы пользователи могли выбирать только до 4 элементов (любой из них).

Это можно легко сделать, обработав событие выбора jQuery UI selectable.

Выбираемый плагин добавляет ui-selecting классы во время операции выбора. Когда операция выбора завершается (т. Е. вы отпускаете левую кнопку мыши), все ui-selecting элементы преобразуются в ui-selected . Кроме этого, внутри ничего больше не хранится об элементах, которые должны быть выбраны.

Это упрощает нашу работу, всякий раз, когда элемент переходит в ui-selecting состояние, selecting срабатывает событие. Там мы можем подсчитать общее количество элементов .ui-selecting и .ui-selected , и если оно превышает допустимый предел, просто удалите ui-selecting класс из текущего элемента.

Это решение работает со всеми операциями выбора, одним щелчком мыши, множественным выбором ctrl и даже выделением в виде ограничивающей рамки.

 $('ul').selectable({
    selecting: function(event,ui){
        // With the current item selected, are we over 4 items (the allowed maximum)?
        if($(this).find('.ui-selecting,.ui-selected').length > 4)
            // If yes, just remove it from the current selection
            $(ui.selecting).removeClass('ui-selecting');
    }
});
  

Демонстрация:http://jsfiddle.net/Vbbfs /

ДЕМОНСТРАЦИЯ JSFIDDLE

Посмотрите на демонстрацию!
И вот как этого добиться:

 $('ul.list li').click(function() {
    $(this).toggleClass('selected');

    if ($('.selected').length > 4) {
        $(this).toggleClass('selected');
        alert('You have already selected 4 items!nYou can undo a selection.');
    }
});
  

P.S.

• При этом вы можете переключать уже выбранные элементы, чтобы выбрать НОВЫЙ!
• n Внутри кода только для новой строки внутри окна предупреждения 😉 😉

Вы ищете селектор :lt().

$('ul li:lt(4)') выбирает 4 первых <li> элемента в списке.

Пример:http://jsfiddle.net/vjbzr /

Это должно быть сделано с помощью :lt(index) метода.

например, $('li:lt(4)') будут выбраны все элементы списка с индексом меньше 4. И поскольку индекс основан на нуле, будут выбраны первые 4 элемента.