CODEWITHSUNDEEP
jqueryeach
BlueCaret
BlueCaret

Reputation: 5000

Jquery: Repeat function for every instance of element

I'll just start be explaining what I have, and then what I need it to do. I'm working with a page that has a "group" of fields. Within this group are four fields that represent content in "columns". Also within this group is a select box that asks how many columns I want to use. On this page I can add and remove multiple "groups".

What I need is something that can hide/show the four column fields depending on the number selected in the select box.

It looks something like this:

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]

I need the script to run for every group that is shown on load, and whenever the select box is changed, and then again whenever a new group is created.

So far I have a script that works on the first group on load and whenever the select box is changed on the first group. I need it to also iterate over the other groups too though. I'm sure I need to use a .each() or something somewhere, but I have no idea where to put it or how.

Here is my current 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();
    });
});

Upvotes: 0

Views: 267

Answers (1)

Sam Battat
Sam Battat

Reputation: 5745

If I understand your question correctly here is how you do that:

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 BASED ON COMMENTS]

Very close! I made a jsfiddle that more closely resembles my markup but I can't get it to work with additional groups, and it also needs to do it on load as well for every group (could load with multiple groups be default) jsfiddle.net/3twj1fee/2 – BlueCaret 4 hours ago

So, what should be visible when you change the option? And why there is no field 1? Is making html changes an option or you have to use this markup? – Sam Battat 3 hours ago

Sorry, the "field 2-4" are just some extra fields. I don't have control over the html so just showing there are other elements within the same parent as the "Columns" fields. The Column 1 to Column 4 fields are what should be hiding/showing. But my real problem is that it doesn't do anything to a second group when added. – BlueCaret 1 hour ago

This solves that problem of non-responding dynamic elements, you should select dynamic elements using a static parent

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

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

The real problem is if the fields and columns divs have the same class name, and have the same parent, how are you gonna determine the first, second, third and fourth column? (assuming that the fields 2-4 are not always the same number, meaning is there always 4 fields (divs) before the 4 columns?)

If the number of fields is always 4 then thats easy to solve, see the demo: https://jsfiddle.net/3twj1fee/4/

Upvotes: 2

Related Questions