Question

我正在尝试获取.XML文件的内容，然后按字母顺序显示列表。

以下是XML文档的设置：

   <markers>
      <marker school="University of One" names="Bob One, Bob Two, Bob Three" lat="32.235260" lng="-130.980506" />
      <marker school="University of One" names="Bob One, Bob Two, Bob Three" lat="32.235260" lng="-130.980506" />
   </markers>

然后我用这个jQuery获取该文件的内容（seniors.xml）：

  downloadUrl("seniors.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var names = markers[i].getAttribute("names");
      var school = markers[i].getAttribute("school");
      var html="<b class="+'school-name'+">"+school+"</b><br><p class="+'student-names'+">"+names+"</p><br>";
      // create the marker
      var marker = createMarker(point,school+" "+names,html);
    }

    markerCluster = new MarkerClusterer(map, gmarkers);

    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;
  });
}

我在另一个函数中定义了side_bar_html将做什么（这会存储列表并将信息放入侧边栏）。

side_bar_html += '<div id="'+linkid+'" class="'+'sidebar-link-box'+'"><div class="'+'padded'+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')" class="sidebar-link">' + html + '<\/a><\/div><\/div>';

我的HTML如下所示。请注意，未设置表单的操作，因为我有一个jQuery keyup事件来排队搜索。

        <form id="live-search" action="">
           <input type="text" class="text-input" id="filter" value="" size="50" placeholder="Search for student/school" tabindex="1"/>
           <span id="filter-count"></span>
        </form>

        <!-- display results -->
       <div id="side_bar"></div> 

       </div>

一切运作良好;结果显示，但我不知道如何使它们按字母顺序显示。我应该在将列表放入side_bar_html之前/之后运行字母函数吗？

Answer 1

在adjust元素内设置scroll属性为true，如下所示

this.elements.tooltip.qtip(
      {
         content: 'I tooltip!', 
         position: {
            corner: {
               tooltip: 'topMiddle',
               target: 'bottomMiddle'
            },
            adjust: {
               resize: true,
               scroll: true
            }
         }
}

Answer 2

尝试

$(function(){

  $.get('seniors.xml', function(xmlDoc){
    var $doc = $(xmlDoc);

    var array = $doc.find('marker').get();
    array.sort(function(obj1, obj2){
      var $obj1 = $(obj1), $obj2 = $(obj2)

      var s1 = $obj1.attr('school'), s2 = $obj2.attr('school');
      if(s1 == s2){
        var n1 = $obj1.attr('names'), n2 = $obj2.attr('names');
        return n1 < n2 ? -1 : 1
      } else {
        return s1 < s2 ? -1 : 1
      }
    });

    $(array).each(function(index, item){
      var $item = $(item);
      $('<li>' + $item.attr('school') + '--' + $item.attr('names') + '</li>').appendTo('#ct')
    });

  }, 'xml');

});

演示：Plunker

使用jQuery按字母顺序显示XML文件的内容

2 个答案: