シングルページアプリケーションのdiv（カード）内での並べ替えメソッドの適用-Vanilla Javascript

debugcn 投稿 Dev

ロドリゴギル

私はJavascriptでシングルページアプリケーションに取り組んでおり、Movie DBAPIからフェッチされたデータによって作成されたカードの名前と人気による並べ替えを実装したいと考えています。私はすでに以下のコードを使用して要素を並べ替えてページに追加しようとしましたが、苦労しています。

これを読んで私を助けてくれてありがとう。本当に感謝しています！

const SORT = {

  namesArr:[],

  name:(ev)=>{
    //avoiding the popstate event to be triggered
    ev.preventDefault();

    //getting the pages content 
    let page= document.querySelector('#actors');

    //getting the parent Element on the page
    let items= document.querySelector('.cards');

    //converting the elements into an array
    items= Array.prototype.slice.call(items.children);

    console.log(items)
    
    //sorting the elements 
    items.sort(function (a, b) {
  
      //getting the name inside each card.
      varA= a.name.toUpperCase();
      varB= b.name.toUpperCase();
      
      if (varA < varB){
        return -1;
      }
      if (varA > varB){
        return 1;
      }
      return 0;
    });

    //iterating over the elements to append it on the page.
    for(i = 0; i < items.length; i++){
      page.appendChild(items[i]);
  }

  },
    
};

<section id= "actors" class="active">
<div class="cards">
<div class="card" data-key="18897"><img class="picture" src="https://image.tmdb.org/t/p/w300/nraZoTzwJQPHspAVsKfgl3RXKKa.jpg"><h3 class="name">Jackie Chan</h3><p class="popularity">Popularity: 28.744</p></div>
<div class="card" data-key="1173223"><img class="picture" src="https://image.tmdb.org/t/p/w300/hkHu1Z4EtN47bPwh6PlBIE3Jz76.jpg"><h3 class="name">Danny Chan Kwok-Kwan</h3><p class="popularity">Popularity: 15.431</p></div>
</div>
</section>

D.シー

カードを並べ替えたいと思います

const cards = document.querySelector("#actors .cards");
const children = [...cards.children];

children.sort((a, b) => {
    return a.querySelector(".name").innerText > b.querySelector(".name").innerText ? 1 : -1;
})

cards.innerHTML = "";
children.forEach(item => cards.appendChild(item));

<section id="actors" class="active">
  <div class="cards">
    <div class="card" data-key="18897"><img class="picture" src="https://image.tmdb.org/t/p/w300/nraZoTzwJQPHspAVsKfgl3RXKKa.jpg">
      <h3 class="name">Jackie Chan</h3>
      <p class="popularity">Popularity: 28.744</p>
    </div>
    <div class="card" data-key="1173223"><img class="picture" src="https://image.tmdb.org/t/p/w300/hkHu1Z4EtN47bPwh6PlBIE3Jz76.jpg">
      <h3 class="name">Danny Chan Kwok-Kwan</h3>
      <p class="popularity">Popularity: 15.431</p>
    </div>
  </div>
</section>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]