同位素不使用附加的html

时间:2017-01-31 14:12:43

标签: javascript jquery html xml-parsing jquery-isotope

我遇到一个问题,我无法过滤从本地.xml文件解析的数据。我在同一个容器中有一些演示图像正在工作和过滤。所以isotope.js确实设置得当。你能看到什么问题吗?

这是我的设置。

index.html(Html + bootstrap) `     

<a href="#" data-filter="*" class="current">All Categories</a>
<a href="#" data-filter=".people">People</a>
<a href="#" data-filter=".places">Places</a>
<a href="#" data-filter=".food">Food</a>
<a href="#" data-filter=".objects">Objects</a>

    </div>

    <div class="col-md-12 skolLista portfolioContainer">`

javascript.js

`

/*jslint browser: true*/
/*global $, jQuery, alert, console*/
 $(window).on('load', function () {

     var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 

 });



 $(document).ready(function(){
             $.ajax({

            type: "GET",
            url: "skolor.xml",
            dataType: "xml",
            success: xmlParser

            });
        });

        function xmlParser(xml){

            $(xml).find("Skola").each(function(){
            var namn = $(this).find('Namn').text(); 
            var adress = $(this).find('Adress').text();
            var arskurser = $(this).find('Arskurser').text();  
            var huvudman = $(this).find('Regi').text();  
            var antalElever = $(this).find('Antal_elever').text(); 
            var andelBehorigaLarae = $(this).find('Andel_behoriga_larare').text();
            var skolansEpost = $(this).find('').text();
                var skolanstelefon = $(this).find('Telefon').text();
               /* var skolansEpost = $(this).find('').text();*/


            $(".portfolioContainer").append("<div class='element people ' > <h3 class='grid-item people'>" + namn + "</h3>" + 
                    "<p class='grid-item arskurser food'>" + arskurser + "</p>" + '<button type="button" class="btn btn-default">Jämför</button> <img src="http://placehold.it/150x150">' + "<p class='grid-item antalElever'> Antal elever:" + antalElever + "</p>" +  "<p class='grid-item huvudman'> Regi:" + huvudman + "</p>" + "<p class='grid-item'> Andel Behöriga Lärare:" + andelBehorigaLarae + "</p>" + "</div>" );  



            });


        } 

    `

1 个答案:

答案 0 :(得分:0)

解决了

  var $items = $(html);

  //Add item to isotope
  $('.grid').isotope( 'insert', $items );