Как добавить функции к некоторым объектам jQuery, но не к другим?

Скажем, у меня есть список <ul>:

<ul class="products">
    ...
</ul>

Я хочу выбрать его с помощью jQuery, а затем добавить некоторые функции к этому объекту. Например, я хотел бы добавить функцию addProduct(productData) и функцию deleteProduct(productId). Однако я хотел бы, чтобы функции добавлялись только к объекту, который возвращался селектором. Так, например, что-то вроде этого:

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});

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

Ответ 1

Если вам нужны только те методы addProduct и deleteProduct для этого единственного объекта jQuery, то то, что у вас есть, будет работать нормально; но вам нужно будет ссылаться на этот объект jQuery/использовать его один раз, чтобы сохранить существование методов addProduct и deleteProduct.

Однако эти методы addProduct и deleteProduct уникальны для этого конкретного объекта jQuery; методы не будут существовать ни на одном другом объекте jQuery, который вы создаете;

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});

// Using this particular jQuery object (productList) will work fine.
productList.addProduct();
productList.removeProduct();

// However, addProduct() does not exist on new jQuery objects, even if they use
// the same selector.
$('ul.products').addProduct(); // error; [object Object] has no method 'addProduct'

Лучший способ сделать это - вернуться к основам и определить отдельные функции addProduct и deleteProduct, которые принимают объект jQuery. Если вы хотите ограничить эти функции, они работают только с селектором ul.products, вы можете сделать:

function addProduct(obj) {
    obj = obj.filter('ul.products');

    // do something with `obj` (its a jQuery object)
}

Этот подход будет рекомендован, поскольку он поддерживает API jQuery.fn; в противном случае вы добавляете addProduct и removeProduct к некоторым экземплярам jQuery.fn, а не к другим, или делаете их использование избыточным в других. Однако при таком подходе addProduct и removeProduct всегда присутствуют, но не попадают никоим образом, если они не хотят их использовать.

Исторические заметки

Этот ответ был изначально написан в ноябре 2011 года, когда был выпущен jQuery 1.7. С тех пор API значительно изменился. Ответ выше относится к текущей версии 2.0.0 версии jQuery.

До 1.9 использовался мало используемый метод под названием jQuery.sub, который связан с тем, что вы пытаетесь сделать ( но не поможет вам, если вы не измените свой подход). Это создает новый конструктор jQuery, поэтому вы можете сделать;

var newjQuery = jQuery.sub();
newjQuery.fn.addProduct = function () {
    // blah blah
};
newjQuery.fn.deleteProduct = function () {
    // blah blah
};

var foo = newjQuery('ul.products');
foo.deleteProduct();
foo.addProduct();

var bar = jQuery('ul.products');
bar.deleteProduct(); // error
bar.addProduct(); // error

Будьте осторожны, хотя псевдоним метода $ ссылался бы на старый объект jQuery, а не на экземпляр newjQuery.

jQuery.sub был удален из jQuery в 1.9. Теперь он доступен как плагин.

Ответ 2

Вы можете создать свои собственные методы jQuery следующим образом:

$.fn.addProduct = function(){
  var myObject = $(this);
  // do something
}

// Call it like:
$("ul.products").addProduct();

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

Альтернативой является создание обычного Javascript-метода, который получает список в качестве параметра. Таким образом вы можете создать более специфичный для списка метод.

Ответ 3

Я думаю, вы хотите добавить функцию к этому объекту DOM.

$(function(){
    // [0] gets the first object in array, which is your selected element, you can also use .get(0) in jQuery
    $("#test")[0].addProduct = function(info){
        alert("ID: " + this.id + " - Param: " + info);
    };


    $("#test")[0].addProduct("productid");
});

Над script wil alert "ID: test - Param: productid"

Живой пример: http://jsfiddle.net/jJ65A/1/

Или обычный javascript

$(function(){
    document.getElementById("test").addProduct = function(info){
        alert(info);
    };
});

Ответ 4

Я думаю, может просто использовать делегат в jQuery:

$(".parentclass").delegate("childclass","eventname",function(){});