#23 肥猫列表


  • 0

    function renderFatCats (cats) {
      
      var arr = [];
      arr = cats.sort(function(x, y){
        return y.weight - x.weight
      });
      console.log(arr);
      $('#cats-list').html('');
      
      for(var i=0; i<arr.length; i++){
        $('#cats-list').append(`
          <div class='cat'>
            <span class='cat-name'>${arr[i].name}</span>
            <span class='cat-weight'>${arr[i].weight}</span>
          </div>
        `)    
      }
    
    }	
    
    

  • 0

    function renderFatCats (cats) {
      let list = document.querySelector('#cats-list');
      list.innerHTML = null;
      cats.sort((a, b) => b.weight - a.weight);
      let str = '';
      for(let v of cats) {
          str+=`<div class='cat'>
    	       <span class='cat-name'>${v.name}</span>
    	       <span class='cat-weight'>${v.weight}</span>
    	    </div>`;
      }
      list.innerHTML = str;  
    }
    

    比较喜欢原生


  • 0

    react不用箭头简写component,怎样实现每次调用都刷新呢?求大神讲解。
    下面是自己实现的版本,经测试,可以运行一次,但不能刷新

    class Cat extends Component {
      render () {
        const { cat } = this.props;
        return (
          <div class='cat'>
            <span class='cat-name'>{ cat.name }</span>
            <span class='cat-weight'>{ cat.weight }</span>
          </div>
        )
      }
    }
    
    class CatList extends Component {
      render () {
        const { cats } = this.props  
        return (
          <div id='cats-list'>
            { cats.map((cat) => <Cat cat={ cat } />) }
          </div>
        )
      }
    }
    
    function renderFatCats (cats) {
      cats.sort((x, y) => y.weight - x.weight);
      ReactDOM.render(<CatList cats={ cats } />, document.getElementById('app'));
    }
    

  • 0

    function renderFatCats (cats) {
            cats = cats.sort((a,b)=>a.weight-b.weight);
            let dom = document.getElementById('cats-list');
            dom.innerHTML = '';
            let df = new DocumentFragment();
            cats.forEach(function (child){
                let item = document.createElement('div');
                item.classList.add('cat');
                Object.keys(child).forEach(function(li){
                    let span = document.createElement('span');
                    span.classList.add('cat-'+li);
                    span.innerHTML = child[li];
                    item.appendChild(span);
                });
                df.appendChild(item);
            });
            dom.appendChild(df);
        }
    

    为什么不对呀~~~


  • 0

    @ScriptOJ 谢谢,非常重要的知识点


  • 0

    @ScriptOJ

      const list = document.getElementById("cats-list");
          list.innerHTML = "";
          cats.sort((a, b) => {
            return a.weight > b.weight ? -1 : 1;
          });
    
          let renders = "";
          cats.forEach(item => {
            renders += `<div class="cat">
                                      <span class="cat-name">${item.name}</span>
                                      <span class="cat-weight">${item.weight}</span>
                                    </div>`;
          });
          list.innerHTML = renders.trim();
    }
    

    本地可以正常使用,但是提交的时候提示“猫没有被正确渲染”


  • 0

    12345678


  • 0

    function renderFatCats (cats) {
      let list = document.querySelector('#cats-list')
      list.innerHTML= null
      if (cats.length >2) {
            cats.sort(function(x, y) {return x['weight'] - y['weight']});
            cats.reverse()
      }
    
      var str = ''
      for (var item of cats) {
        str += `<div class='cat'><span class='cat-name'>${item.name}</span><span class='cat-weight'>${item.weight}</span></div>`
      }
      list.innerHTML = str
    }
    

    下面不可以:

    cats.sort(function(x, y) {return x['weight'] - y['weight']});
    cats.reverse() 
    

    这样就可以:

    cats.sort(function(x, y) {return y['weight'] - x['weight']});
    

  • 0

    @Sleet 我也是自己写的排序没有用sort 也会出现有时候通过的情况,可能是排序部分在某些数据测试下没通过.试了半天没试出来.


  • 0

    @zhierrox 更新一下:犯了低级错误,class应该为className!!!


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待