#23 肥猫列表


  • 0
    administrators

    现在有很多只猫,都很肥:

    const cats = [
      { name: 'Tom', weight: 300 },
      { name: 'Lucy', weight: 400 },
      { name: 'Lily', weight: 700 },
      { name: 'Jerry', weight: 600 },
      ...
    ]
    

    现在你需要把它们按照由胖到瘦的顺序把它们渲染到 id 为 cats-listdiv 元素当中:

    <div id="cat-list">
      <div class='cat'>
        <span class='cat-name'>Lily</span>
        <span class='cat-weight'>700</span>
      </div>
      <div class='cat'>
        <span class='cat-name'>Jerry</span>
        <span class='cat-weight'>600</span>
      </div>
      <div class='cat'>
        <span class='cat-name'>Lucy</span>
        <span class='cat-weight'>400</span>
      </div>
      <div class='cat'>
        <span class='cat-name'>Tom</span>
        <span class='cat-weight'>300</span>
      </div>
      ...
    </div>
    

    完成 renderFatCats 函数,接受一个 cats 数组作为参数,然后它会往 div#cats-list 元素内渲染类似以上的结果。注意类名需要保持一致;另外renderFatCats 可能会被多次调用,注意清空上一次渲染的数据。

    你可以使用 jQuery、React.js 等方式来完成。

    (你不需要调用 renderFatCats)。


  • 0

    function renderFatCats (cats) {
    /* TODO */
    let catElement = '';
    $('#cats-list').empty();
    cats.sort((a,b)=>a.weight<b.weight).map((v)=>{
    catElement += <div class='cat'>+
    <span class='cat-name'>${v.name}</span>+
    <span class='cat-weight'>${v.weight}</span>+
    </div>;
    });
    $('#cats-list').append(catElement);
    }

    提示猫没渲染


  • 0
    administrators

    你的 <div> 元素没有用字符串包裹起来


  • 0
    administrators

    @azoth 你可以贴到浏览器里面看看报错


  • 0
    administrators

    明白了,你代码没贴对。你可以用 markdown 贴代码


  • 0

    @胡子大哈 div 代码里面用的`包裹的,回贴的时候不知道是不是被转义了没了,浏览器里面跑是正常的


  • 0

    @胡子大哈 function renderFatCats (cats) {
    /* TODO */
    let catElement = '';
    $('#cats-list').empty();
    cats.sort((a,b)=>a.weight<b.weight).map((v)=>{
    catElement += '<div class="cat">'+
    '<span class="cat-name">'+v.name+'</span>'+
    '<span class="cat-weight">'+v.weight+'</span>'+
    '</div>';
    });
    $('#cats-list').append(catElement);
    }
    改成这样了 也是不行 本地调是正常的


  • 0
    administrators

    你把 + 号去掉试试,用了 `` 就不用➕了。


  • 0
    administrators

    @azoth 另外你的排序也不对


  • 0

    题目错误:
    完成 renderFatCats 函数,接受一个 cats 数组作为参数,然后它会往 div#cat-list 元素内渲染类似以上的结果。注意类名需要保持一致;另外renderFatCats 可能会被多次调用,注意清空上一次渲染的数据。

    实际

    <div id="cats-list"></div>
    

    https://jsfiddle.net/csvwolf/g7pxq2gg/

    不知道啥问题 还是不通过


  • 0
    administrators

    @zhpech (a, b) => b.weight - a.weight 是不能正确排序的,举个例子:

    [400, 460, 771, 862, 487, 855, 626, 359, 384, 629, 136].sort((a, b) => a < b)
    

  • 0
    administrators

    @zhpech 另外感谢指出错误,😊


  • 0
    administrators

    关于肥猫列表这题,排序的时候是不能直接用 a < b 的,这样会导致排序结果无法预测。具体原因可见:

    http://stackoverflow.com/a/24080786/2450318


  • 0

    @胡子大哈 是的 半夜脑抽=、=谢谢 XD


  • 0

    代码如下,自己测试后和要求的dom结构是一致的但提示没有被正确渲染。不知道代码哪里出了错误

    function renderFatCats (cats) {
      cats.sort((obj1, obj2) => {
        return obj1.weight < obj2.weight
      })
      
      let parent = document.getElementById('cats-list');
      let fragment = document.createDocumentFragment();
      let catDom = ''
      parent.innerHTML = '';
      cats.map(item => {
        let catName = null;
        let catWeight = null;
        
        catDom = document.createElement('div')
        catDom.classList.add('cat')
        
        catName = document.createElement('span')
        catName.classList.add('cat-name')
        catName.innerText = item.name
        
        catWeight = document.createElement('span')
        catWeight.classList.add('cat-weight')
        catWeight.innerText = item.weight
        
        catDom.appendChild(catName)
        catDom.appendChild(catWeight)
        
        fragment.appendChild(catDom)
      })
      
      parent.appendChild(fragment)
    }
    
    

  • 0
    administrators

    @Saku 你的问题应该是排序问题,上面有讨论,你可以看一下。


  • 0

    @胡子大哈 哦明白


  • 0
    管理员

    function renderFatCats (cats) {
      cats.sort((obj1, obj2) => {
        if(obj1.weight < obj2.weight) return 1;
        else return -1
      })
      let catsList = document.getElementById('cats-list');
      catsList.innerHTML = '';
      let catDiv, catNameSpan, catWeightSpan;
      cats.map(item => {
        catDiv = document.createElement('div');
        catNameSpan = document.createElement('span');
        catWeightSpan = document.createElement('span');
        catDiv.classList.add('cat')
        catNameSpan.classList.add('cat-name')
        catNameSpan.innerText = item.name
        catWeightSpan.classList.add('cat-weight')
        catWeightSpan.innerText = item.weight
        catDiv.appendChild(catNameSpan)
        catDiv.appendChild(catWeightSpan)
        catsList.appendChild(catDiv)
      })
    }
    
    

  • 1

    补个react的

    function renderFatCats(cats) {
        cats.sort((a, b) => a.weight < b.weight ? 1 : -1)
    
        const CAT = props => <div className="cat">
            <span className="cat-name">{props.cat.name}</span>
            <span className="cat-weight">{props.cat.weight}</span>
        </div>
    
        const CATLIST = props => <div id="cats-list">{props.cats.map(item => <CAT cat={item} />)}</div>
    
        ReactDOM.render(<CATLIST cats={cats} />, document.getElementById('app'))
    }
    

  • 0

    神奇!我的代码当中有时候会报错有时候会通过,是不是因为我用innerHTML的关系

    function renderFatCats(cats) {
      let catsList = document.querySelector('#cats-list');
      catsList.innerHTML = ''
      for(let i=0;i<cats.length;i++){
        for(let j = i+1;j<cats.length;j++ ){
          if(cats[i].weight<cats[j].weight){
            let tempCat = cats[j];
            cats[j] = cats[i];
            cats[i] = tempCat; 
          }
        }
      }
      cats.forEach(function(vaule){
          let catsList = document.querySelector('#cats-list');
          let catDiv = document.createElement('div');
          let nameSpan = document.createElement('span');
          let weightSpan = document.createElement('span');
          catDiv.setAttribute('class','cat');
          nameSpan.setAttribute('class','cat-name');
          weightSpan.setAttribute('class','cat-weight');
          nameSpan.innerHTML = vaule.name;
          weightSpan.innerHTML = vaule.weight + '';
          catDiv.appendChild(nameSpan);
          catDiv.appendChild(weightSpan);
          catsList.appendChild(catDiv);
      })
    }
    

登录后回复
 

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