CODEWITHSUNDEEP
javascriptjqueryhtml
Stavros_S
Stavros_S

Reputation: 2235

How can I make a loop split 4 inputs between two divs?

I need to make a small behavior change to a block of code I inherited, the set up is unfortunately one very large function that is building out an html template and has a large number of for loops with in it.

Currently there is a section in the template function where a loop generates 4 text inputs with in a containing <div> along with submit button. What I would like to do is make it to where if in the case that this specific area has more than two inputs then put two inside of one <div> with a subit and then the other two with in another div with its own submit, so essentially splitting them up. Here is a quick and (very) dirty visual example of what I am trying to achieve.

http://jsbin.com/izejin/5/

And below is the current loop that is generating the 4 inputs into the single <div>. My thought is that I need to set up a counter that upon being === 2 will create the new html elements with new classes that will style them as need be. But I'm unsure how to achieve that while still keeping the loop going. 

if (measurementTypeGroup.MeasurementTypes.length > 1) {

    newNodeHtml += "<div id='" + measurementClass + "-3-" + measurementTypeGroup.MeasurementTypes[0].TargetConfigure[0].TargetType + "' class='target-metric input " + measurementClass + "-input'>";

    for (var k = 0; k < measurementTypeGroup.MeasurementTypes.length; k++) {
        var mType = measurementTypeGroup.MeasurementTypes[k];
        var userTarget = mType.UserTarget;
        var targetConfigure = mType.TargetConfigure[0]; 

        newNodeHtml += "<div><span>" + mType.MeasurementTypeName + " TARGET</span>" +
                    "<input type='text' id='txt-" + measurementClass + "-3-" + mType.MeasurementTypeID + "' placeholder='" + mType.UnitName + "' value='" + targetHighValue + "' " + disableAttribute + "></div>";
    }

    newNodeHtml += "<a onclick='CellClicked(" + mTypeGroupID + ", 3, 3)'><span class='check-range'></span></a>" +
            "</div>";
}

Thanks for any help!

Upvotes: 0

Views: 194

Answers (1)

abc123
abc123

Reputation: 18753

This should do what you need, it is a nested loop with a number of loops and an index

if (measurementTypeGroup.MeasurementTypes.length > 1) {
    var index = 0;
    var numberOfLoops = Math.ceil(measurementTypeGroup.MeasurementTypes.length / 2);
    for (var i = 0; i < numberOfLoops; i++) {
        var newNodeHtml = '';
        newNodeHtml += "<div id='" + measurementClass + "-3-" + measurementTypeGroup.MeasurementTypes[0].TargetConfigure[0].TargetType + "' class='target-metric input " + measurementClass + "-input'>";

        for (index; index < index + 2; index++) {
            if(measurementTypeGroup.MeasurementTypes[index] === undefined)
                break;

            var mType = measurementTypeGroup.MeasurementTypes[index];
            var userTarget = mType.UserTarget;
            var targetConfigure = mType.TargetConfigure[0];

            newNodeHtml += "<div><span>" + mType.MeasurementTypeName + " TARGET</span>" +
                "<input type='text' id='txt-" + measurementClass + "-3-" + mType.MeasurementTypeID + "' placeholder='" + mType.UnitName + "' value='" + targetHighValue + "' " + disableAttribute + "></div>";
        }

        newNodeHtml += "<a onclick='CellClicked(" + mTypeGroupID + ", 3, 3)'><span class='check-range'></span></a>" +
            "</div>";
    }
}

Upvotes: 1

Related Questions