我遇到一个问题,我无法过滤从本地.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>" );
});
}
`
答案 0 :(得分:0)
解决了
var $items = $(html);
//Add item to isotope
$('.grid').isotope( 'insert', $items );