Question

假设我有一个节点列表

import React from 'react';
import ReactDOM from 'react-dom';

class ViewSection extends React.Component {
    constructor(props) {
        super(props);

        this.state = { 
            image: [],
            like: [],
            location: [],
            first_name: [],
            last_name: [],
            pictureId: [0,1,2,3,4,5,6,7,8,9],
            page: 1
        };
        this.handleScroll = this.handleScroll.bind(this) // I'M MOVING DATA TO HANDLE SCROLL
    };

    handleScroll(e) {

        e.preventDefault();
        let documentHeight = document.documentElement.offsetHeight;
        let windowHeight = window.innerHeight;
        let windowScroll = window.scrollY;
        let scrollTotal = windowScroll + windowHeight;

        if (scrollTotal == documentHeight) {   

            this.setState({  page: this.state.page + 1  })
            // console.log(this.state.page);
        }
    };

    componentDidMount() {


        let urlImage = ('https://api.website.com/categories/' + this.props.params.sectionId +  '/photos/?client_id=MYID&page=' +    this.state.page); // MAP ALL PAGES?????

        window.addEventListener("scroll", this.handleScroll,false); 

        fetch(urlImage)
        .then(resp => resp.json())
        .then(response => {

            // console.log(response);
            // console.log(this.state.page);

            let arrayOfImages = response.map((item) => item.urls.small );
            let arrayOfLikes = response.map((item) => item.likes );
            let arrayOfLoc = response.map((item) => item.user.location );
            let arrayOfFirst_Names = response.map((item) => item.user.first_name );
            let arrayOfLast_Names = response.map((item) => item.user.last_name );

            this.setState ({
                image : arrayOfImages,
                like : arrayOfLikes,
                location : arrayOfLoc,
                first_name : arrayOfFirst_Names,
                last_name : arrayOfLast_Names
            })
        });
    };

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll,false);
    };

    render() {

        // console.log(this.state.image);
        console.log(this.state.page); // LISTENS AND RENDERS ALL CHANGES... MAYBE PROMISE.ALL ON    urlImage...?

        let section = this.state.image.map((elem, i, page) => {

            return (
                <Link key={i}  onScroll={this.handleScroll} className="section-picture" to= {`/section/${this.props.params.sectionId}/picture/${this.state.pictureId[i]}`}>
                    <img className="image" src={elem} alt="" />
                     <div className="section-picture-stats">
                        <div className="section-picture-stat"> author: {this.state.first_name[i]}   {this.state.last_name[i]}</div>
                        <div className="section-picture-stat">{this.state.like[i]}  like(s)</div>
                        <div className="section-picture-stat">{this.state.location[i]}
                        </div>
                    </div>
                </Link>
            )
        });

        return (
            <div className="gallery">
                <h1>Section</h1>
                <div className="buttons">
                    <div className="sort-clicks click">sort by: <a className="click" href="">new</a>    or <a className="click" href="#">trending</a></div> <Link className="click"    to='/'>back</Link>
                </div>
                <div className="section-picture-list">{section}</div>
            </div>
        )
    };
};

export { ViewSection }

我想根据div的数据属性使用比较函数 data-start 进行排序

NodeList(5) [div.card, div.card, div.card, div.card, div.card]
0    :    div.card
1    :    div.card
2    :    div.card
3    :    div.card
4    :    div.card
length    :    5
__proto__    :    NodeList

但是我继续按照他们的数据属性值来命令元素，在我的例子中是一个ISOString [ex。＆＃34; 2018-01-08T20：39：00Z＆＃34]。

在这里查看JsFiddle！ Js Fiddle containing basic html, css

Answer 1

你能试试吗

var cards = document.querySelectorAll('.card');
Array.from(cards).sort( function(a,b){
    a = new Date(a.attributes[2].nodeValue).valueOf() 
    b = new Date(b.attributes[2].nodeValue).valueOf()

    return a - b;

}).forEach(el => {
    document.querySelector('.right3').appendChild(el);
});

问题是你要比较两个导致NaN（不是数字）的字符串。这会将日期转换为unix时间戳，这只是一个数字，然后将它们进行比较。

基于你的小提琴的例子：https://jsfiddle.net/sd41k6mj/4/

按属性nodeValue对Nodelist进行排序

1 个答案: