Show items in jQuery, using inner loop [closed]

Question

Show items in jQuery, using inner loop [closed]

Navigation

#1 by (2 votes)
#2 by (2 votes)

-1

I have the following jQuery:

$(".quantidade_lotes").change(function() {
    var quantidade_linhas = $("#quantidade_linhas").val();
    var quantidade_lotes = $(".quantidade_lotes").val();
    var quantidade_dividida = (quantidade_linhas/quantidade_lotes);
    var quantidade_dividida_acima = Math.ceil(quantidade_dividida);
});

In this, quantity_lines is = 17, quantity_lets = 5, split_size = 3.4, and split_size is equal to 4. So far, everything is OK and correct.

The case is, I need to do a Loop, where I then put 4 items inside the HTML. I tried the following:

for (var i = 0; i <= quantidade_dividida_acima; i++) {
    $(".lotes_lista").html("<h1>Título</h1>"+i);
}

However, it does not display the 4, for example, it only inserts one. How can I adjust this?

Inthiscase,IselecthowmanylotsI'mgoingtosplitthissmssending,thenwhenIselect,itwillbringmeallthedivisions,accordingtothelayout..

ThisisthecodethatjQuerymustinclude,witheachbatch,beingdividedaccordingtotheselection.

<tableclass="table">
    <thead>
        <tr>
            <th> Lote </th>
            <th> Qtde </th>
            <th class="text-right"><span > Data</span> </th>
            <th>inicial</th>
            <th class="text-right">Data</th>
            <th>Final </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><span class="widget-thumb-body-stat label label-danger btn-circle" data-counter="counterup" data-value="1">1</span>
            </td>
            <td> <span class="widget-thumb-body-stat label label-danger btn-circle" data-counter="counterup" data-value="1080">1080</span>
            </td> 
            </td>
            <td>
                <div class="input-group date date-picker" data-date-format="dd-mm-yyyy" data-date-start-date="+0d">
                    <input type="text" class="form-control" readonly>

                    <span class="input-group-btn">
                        <button class="btn default" type="button">
                            <i class="fa fa-calendar"></i>
                        </button>

                    </span>
                </div>
            </td>

            <td> 
                <div class="form-group">
                    <div class="input-group">
                            <input type="text" class="form-control timepicker timepicker-24">
                        <span class="input-group-btn">
                            <button class="btn default" type="button">
                                <i class="fa fa-clock-o"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </td>
            <td><b>-</b>
            </td>
            <td>
                <div class="input-group date date-picker" data-date-format="dd-mm-yyyy" data-date-start-date="+0d">
                    <input type="text" class="form-control" readonly>
                    <span class="input-group-btn">
                        <button class="btn default" type="button">
                            <i class="fa fa-calendar"></i>
                        </button>
                    </span>
                </div>
            </td>
            <td> 
                <div class="form-group">
                    <div class="input-group">
                            <input type="text" class="form-control timepicker timepicker-24">
                        <span class="input-group-btn">
                            <button class="btn default" type="button">
                                <i class="fa fa-clock-o"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </td>                                                       
        </tr>
    </tbody>
</table>

jquery

asked by anonymous 26.10.2016 / 18:29

2 answers

How to add HTML code inside an ol tag using JavaScript? login system using php and mysql [duplicate]

score 2 · Answer 1

The problem is that you need to store the values in an array, and every time you do the calculation you are overwriting the value in a single variable, try this:

var quantidade_dividida_acima = [];

$(".quantidade_lotes").change(function() {
    var quantidade_linhas = $("#quantidade_linhas").val();
    var quantidade_lotes = $(".quantidade_lotes").val();
    var quantidade_dividida = (quantidade_linhas/quantidade_lotes);
    var quantidade_dividida_acima.push(Math.ceil(quantidade_dividida));
});
//Como o código não possui mais detalhes, 
//penso que talvez este trecho entre em algum outro evento seu
$.each( quantidade_dividida_acima, function( key, value ) {
    $(".lotes_lista:nth-child("+key+")").html("<h1>Título</h1>"+value);
}

score 2 · Answer 2

I recommend that you read the documentation and understand the functions, what you are doing is meaningless:

for (var i = 0; i <= quantidade_dividida_acima; i++) {
    $(".lotes_lista").html("<h1>Título</h1>"+i);
}

The html method does not put data, it overwrites everything, it will never work, the correct one would look something like this:

var dados = "";

for (var i = 0; i <= quantidade_dividida_acima; i++) {
    dados += "<h1>Título</h1>"+i; //Adiciona um item a string
}

$(".lotes_lista").html("<h1>Título</h1>"+i);