How to walk an append that is inside a for? [closed]

Navigation
0

In HTML I have the following: 

    <div class="row"> 
      <ul class="simplefilter">
         Simple filter controls:
           <li class="active" data-filter="all">All</li>

      </ul>
    </div>

<div class="row">
   <div class="filtr-container">

   </div>
</div>

and in a file JS : 

for (var i = 0; i < 6; i++) 
    {

        $(".simplefilter").append("<li class='d' data-filter='"+[i]+"'>Cityscape</li>"); // ESTE FUNCIONA BIEN

        $(".filtr-container").append("<div class='col-xs-6 col-sm-4 col-md-3 filtr-item' data-category='"+[i]+"' data-sort='Busy streets'><img class='img-responsive' src='img/city_1.jpg' alt='sample image'><span class='item-desc'>Busy Streets</span></div>");
    };

the class simplefilter is traveling 5 times as indicated by the for and works perfectly but the class filtr-container is not 'taking' the method append and if I use the method html only what walk once.

That's why this, if I'm also going through [i] in data-category='"+[i]+"' ?

The error that appears to me is the following: 

jquery.filterizr.js:414 Uncaught TypeError: Cannot read property 'push' of undefined
    at n.fn.init._makeSubarrays (jquery.filterizr.js:414)
    at Object.init (jquery.filterizr.js:159)
    at n.fn.init.$.fn.filterizr (jquery.filterizr.js:84)
    at HTMLDocument.<anonymous> (david:92)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

I would appreciate the interest.

    
asked by JDavid 22.05.2017 в 20:47
source

1 answer

1

As far as I can see the two sentences are executed in the loop. The problem will be in another part of the code.

See your example working: 

for (var i = 0; i < 6; i++) 
    {

        $(".simplefilter").append("<li class='d' data-filter='"+[i]+"'>Cityscape</li>"); // ESTE FUNCIONA BIEN

        $(".filtr-container").append("<div class='col-xs-6 col-sm-4 col-md-3 filtr-item' data-category='"+[i]+"' data-sort='Busy streets'><img class='img-responsive' src='img/city_1.jpg' alt='sample image'><span class='item-desc'>Busy Streets</span></div>");
    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row"> 
  <ul class="simplefilter">
     Simple filter controls:
     <li class="active" data-filter="all">All</li>
  </ul>
</div>

<div class="row">
 <div class="filtr-container">

 </div>
</div>
    
answered by 22.05.2017 в 20:55
Visual Studio. Notify when a property of an object is being modified Double List in Pascal