Question

这个简单的jQuery演示在使用
进行调用时执行以下操作 $('.markdown-editor').convertToList();：
- 在HTML元素中搜索以查找所有链接
- 构建一个下拉选择元素并注入DOM中 - 将每个找到的链接添加到上面构建的下拉选择元素

当使用类作为选择器$('.markdown-editor')时，我希望它能够找到每个类元素中的链接，并将它们注入到仅用于该元素的selecvtion领域。

现在，如果有多个匹配元素，它将找到所有这些元素的链接，并在每个项目中包含整个组合列表，而不是每个项目的单独列表。

下面的演示有2个div，类.markdown-editor。

在Div 1内部有链接1,2和3.

在Div 2中是链接4,5和6

因此，它会在两个Div中创建一个选择字段，其中包含1,2,3,4,5和6个链接，而不是包含1-3的Div 1和包含4-6的Div 2。

如何修改此o o每个Div selectino字段仅包含在该Div中找到的链接？

演示 - https://jsfiddle.net/jasondavis/pbkypodh

/* use : $(selector).convertToList() */  
(function ($) {
    $.fn.convertToList = function () {
        var that = this;

        // build selection list element and add it before our selector
        this.before(
          $('<select><option>Please select</option></select>').change(function () {
            window.location = $(this).val();
          })
        );

        // iterate each link inside our selector and add it to the 
        // selection element we built above
        this.find('a').each(function () {
            that.prev('select').append('<option value="' + $(this).attr('href') + '">' + $(this).html() + '</option>');
            // hide original link
            $(this).remove();
        });
    };
})(jQuery);


$(document).ready(function() {
    $('.markdown-editor').convertToList();
});

1 个答案:

答案 0 :(得分：1)

Answer 1

要使插件代码适用于多个元素，请将插件代码包装在each()中。

$.fn.convertToList = function () {
    return this.each(function() {
        // Plugin code here
    });
};

这可以在jQuery's plugin development guide上看到。^{从这里引用}

您的典型jQuery对象将包含对任意数量的DOM元素的引用，这就是jQuery对象通常被称为集合的原因。如果你想对特定元素进行任何操作（例如获取数据属性，计算特定位置），那么你需要使用.each()来遍历元素。

如何使用多个选择器匹配的jQuery插件在每个选项上进行可分离处理

1 个答案: