Jquery：要素のすべてのインスタンスに対して関数を繰り返します。

Question

私は自分の持っているものを説明し始めます。フィールドの「グループ」を持つページを使って作業しています。このグループ内には、「列」内のコンテンツを表す4つのフィールドがあります。このグループ内には、使用する列の数を尋ねる選択ボックスもあります。このページでは、複数の「グループ」を追加したり削除したりできます。私は必要なもの

は、選択ボックスで選択した数に応じて、4列フィールドを表示/非表示ができるものです。私は負荷に示されているすべてのグループのために実行するスクリプトが必要

Group 1: 
    Number of Columns = 1 Column 
    Column 1 Content (shown) 
    Column 2 Content (hidden) 
    Column 3 Content (hidden) 
    Column 4 Content (hidden) 
Group 2: 
    Number of Columns = 3 Column 
    Column 1 Content (shown) 
    Column 2 Content (shown) 
    Column 3 Content (shown) 
    Column 4 Content (hidden) 
[add group] 

、そして新しいグループが作成されるたびにいつでも選択ボックスを再度変更し、：

は

それは次のようになります。

これまでのところ私は、負荷の最初のグループ上で動作し、選択ボックスは、最初のグループに変更されるたびにスクリプトを持っています。私はそれも他のグループを反復する必要があります。 .each（）やどこか別のものを使う必要があると確信していますが、どこに置くかわかりません。ここで

は私の現在のJSです：

$(function() { 
    var csColumns = $('select[name*="section_columns"]'); 
    var csContent1 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(5)'); 
    var csContent2 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(6)'); 
    var csContent3 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(7)'); 
    var csContent4 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(8)'); 
    csColumnsValue(); 

    csColumns.change(function() { 
     csColumnsValue(); 
    }); 

    function csColumnsValue() { 
     if (csColumns.val() == 'one') { 
      csContent2.hide(); 
      csContent3.hide(); 
      csContent4.hide(); 
     } else if (csColumns.val() == 'two') { 
      csContent2.show(); 
      csContent3.hide(); 
      csContent4.hide(); 
     } else if (csColumns.val() == 'three') { 
      csContent2.show(); 
      csContent3.show(); 
      csContent4.hide(); 
     } else if (csColumns.val() == 'four') { 
      csContent2.show(); 
      csContent3.show(); 
      csContent4.show(); 
     } 
    } 

    $(".repeater-add button").click(function() { 
     csColumnsValue(); 
    }); 
}); 

Answer 1

私は正しくここにあなたの質問を理解していれば、あなたがそれを行う方法です。

var $groupClone = $('.group').eq(0).clone(); 
$(".wrapper").on("change", ".col-num", function(){ 
    var num = $(this).val(); 
    var $parentGroup = $(this).parents('.group'); 
    $(".columns li:gt("+(num - 1)+")", $parentGroup).hide(); 
    $(".columns li:lt("+num+")", $parentGroup).show(); 
}); 

$('#add-group').on('click', function(){ 
    $groupClone.clone().appendTo('.wrapper'); 
}); 

はDEMO：https://jsfiddle.net/ghxLsg6g/1/

を[UPDATEがに基づいてコメント数]

非常に近い！ jsfiddle（ グループはデフォルトに複数で読み込むことができます）私はより密接に私のマークアップ に似ているjsfiddleを作ったが、私は、それは追加のグループで動作するように取得することはできません、それはまた、すべてのグループのためにも負荷にそれを行うに を必要とします.NET/3twj1fee/2 - BlueCaret 4時間前

ですから、オプションを変更すると、何が見えるはず？そしてなぜそこに はフィールド1ではありませんか？ html変更をオプションにしているか、 にこのマークアップを使用する必要がありますか？ - サムBattatは3時間前

申し訳ありませんが、「フィールド2-4は、」ただ、いくつかの余分なフィールドです。私は のHTMLを制御していないので、 "Columns"フィールドと同じ親である の中に他の要素があることを示しているだけです。列1〜列4 のフィールドは、非表示にする/表示するフィールドです。しかし、私の本当の問題は、追加されたときに第二のグループに何もしないことです。 - 時間前BlueCaret 1

これは、非応答の動的要素のその問題を解決し、あなたがあれば本当の問題は、静的な親に

$(".repeater-slot").on("change", "select[name*='section_columns']", function(){ 
.... 
... 
}); 

https://jsfiddle.net/3twj1fee/3/

を使用して動的な要素を選択する必要がありますフィールドとカラムのdivは同じクラス名を持ち、同じ親を持ちます。どのようにして1番目、2番目、3番目、4番目のカラムを決めるのでしょうか？（フィールド2〜4は必ずしも同じ数ではないと仮定し、4つのフィールドの前に常に4つのフィールド（divs）があることを意味します）。

フィールドの数が常に4で、デモ：https://jsfiddle.net/3twj1fee/4/