は、以下のシンプルなjQueryのデモが<br> <code>$('.markdown-editor').convertToList();</code>で呼び出されたときに、次ん各1

Question

に分離可能プロセスと一致しますドロップダウン選択素子とDOM
に注入 - 私はそれが各クラス要素内のリンクを見つけて、にそれらを注入したいセレクタ$('.markdown-editor')としてクラスを使用する場合

の上に構築されたドロップダウン選択要素に見つかった各リンクを追加そのelのためだけにselecvtion feild ement。

今のところ一致する要素が複数ある場合は、すべての要素からリンクを見つけ出し、それぞれのリストの代わりに各項目に組み合わせたリスト全体を含めます。

以下のデモでは、クラスが2つあり、クラスは.markdown-editorです。

内部ディビジョン1がリンク1、2、ディビジョン2 3.

、リンク4、5、及び6

はだから、両方のリンク1を含んでいて、両方のdivで選択フィールドを作成Divを1〜3、Div 2を4-6の代わりに2,3,4,5、および6とする。

これを変更するにはどうしたらいいですか？各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(); 
}); 

Answer 1

each()でプラグインのコードをラップし、複数の要素のプラグインのコードを動作させるために。

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

jQuery's plugin development guideで見ることができます。 ^{DOM要素の任意の数への参照が含まれていますここで}

あなたの典型的なjQueryオブジェクトから引用、とjQueryオブジェクトは、多くの場合、コレクションと呼ばれている理由です。特定の要素（データ属性の取得、特定の位置の計算など）を操作する場合は、要素をループするには.each()を使用する必要があります。