Question

我有一个结果页面，可以将结果呈现为div。这些div有几个数据属性，我想用它们来重新排序它们的升序和降序。

例如：

<div data-price="15000" data-pet="1" data-balcony="0">content</div>

我想用下拉选项重新排序

<select>
<option value="0">Sort by</option>
<option value="1">Low price to high</option>
<option value="2">high price to low</option>
</select>

有人可以帮忙吗？ div的数量是可变的。

Answer 1

如果数据很多，那么在浏览器上执行此操作可能会非常慢，最好在服务器上执行此操作。

这是一个使用jQuery的脏解决方案。

＆＃13;

df = pd.DataFrame({'a': [1, 2], 'b': [3, 4]})
>>> df[['a', 'b']].apply(tuple, axis=1).isin([(1, 3), (30, 40)])
0    (1, 3)
1    (2, 4)
dtype: object

＆＃13;

  raph1">It is my first task</p>
    <!-- Map -->
        <div id="googleMap" onLoad="myMap()"></div>



    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8BTio11xs3TIdsKPMG8g9iA7sS4NqAzE&callback=myMap"></script>



    </body>
</html>

    <!-- Script -->
         var cities = [
         {
            city: 'Alice Springs',
            icon: 'small-village.png',
            lat:  -23.69804199999999,
            long: 133.8807471,
            desc: "Alice Springs is the third-largest town in the Northern Territory of Australia.Popularly known as the Alice or simply Alice, Alice Springs is situated roughly in Australia's geographic centre.",
          },
          {
            city: 'Sidney',
            icon: 'big-city.png',
            lat:  -33.8688197,
            long: 151.20929550000005,
            desc: "Sidney is the state capital of New South Wales and the most populous city in Australia and Oceania.",
          }];
         function myMap() {
         //Center the map on Australia
         var omap= {
             center:new google.maps.LatLng(-25.274398,133.77513599999997),
             zoom:4,
                    };
         //Info LatLng
         markkers = [];
         var ne= {lat: -10.537626378223683,lng: 104.919462023010};
         var sw= {lat: -40.314544789915544,lng: 158.782164034453};

         //Center and resize

         google.maps.event.addDomListener(window, "resize", function() {
                                                                         var bound = new google.maps.LatLngBounds();
                                                                         for(var i in markkers) {
                                                                                                         bound.extend(markkers[i].getPosition());
                                                                                                      }
                                                                         map.fitBounds(bound);
                                                                        });
         var map=new google.maps.Map(document.getElementById("googleMap"),omap);
        //Inv Markers
            var inv1= new google.maps.Marker({
            position: ne,
            icon: 'inv.png',
            map: map,}); 

         var inv2= new google.maps.Marker({
            position: sw,
            icon: 'inv.png',
            map: map,}); 
         markkers.push(inv1)
         markkers.push(inv2)            
        //Markers
        var infoWindow = new google.maps.InfoWindow();
        var makercreate = function (info){

    var maker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(info.lat, info.long),
        title: info.city,
        icon: info.icon,
    });

    maker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

    google.maps.event.addListener(maker, 'click', function(){
        infoWindow.setContent('<h2>' + maker.title + '</h2>' + maker.content);
        infoWindow.open(map, maker)});
    };
            for (i = 0; i < cities.length; i++){
            makercreate(cities[i]);
}

＆＃13;

尽管如此，这只是少量元素的一个例子。

如何根据数据属性对div进行排序，并更改下拉列表

1 个答案: