為什么我的for回圈不會增加vari？（更新）

更新：before-title 是錯誤的，for 回圈沒問題（可能）。問題是我無法參考產品本身。最后 if (if(notItsPlace)) 它不是我必須使用的 productArr[i].parentNode 而是產品名稱，但我需要自己對產品進行排序。所以新的問題是：

如何參考兩個級別的元素？

大家好，我是 JavaScript 新手，有一個簡單的問題：在我下面的代碼中，for 回圈不會增加 var i 而是陷入無限回圈。我確定有些東西出了問題，但無法弄清楚是什么。

任務是按字母順序（和許多其他順序）放置產品專案，在這種情況下，產品不是來自資料庫，而是用 HTML 撰寫的（我知道）。無法編輯 HTML 并且不想使用 JQuery。

先感謝您！

var sortingSel = document.querySelector(".order");
var product = document.querySelectorAll("div[class='product']");
var productArr = Array.from(product);

sortingSel.onchange = function(){

    var sortingOpt = parseInt(sortingSel.options[sortingSel.selectedIndex].value);

    var notItsPlace;
    var switchPlace = true;

    switch(sortingOpt){
        
        case 2:

            while (switchPlace){

                switchPlace = false;

                for (var i = 0; i < (productArr.length -1); i  ){
                    console.log("i = "   i);

                    notItsPlace = false;
                            
                    if (productArr[i].querySelector(".product-name").innerText.toLowerCase() > productArr[i   1].querySelector(".product-name").innerText.toLowerCase()){

                        notItsPlace = true;
                        break;
                    } 
                }

                if (notItsPlace){
                    productArr[i].parentNode.insertBefore(productArr[i   1], productArr[i]);
                    
                    switchPlace = true;
                } 
            }

            break;
            default:
                console.log("def");
    }
}

 <select style="padding: 10px;" class="order">
                        <option value="0">case 0</option>
                        <option value="1">case 1</option>
                        <option value="2">case 2</option>
                        <option value="3">case 3</option>
</select>


<div class="products">
                <div class="product">
                    <span class="image-container">
                        <img src="">
                    </span>
                    <div class="product-data" data-identifier="6">
                        <div class="product-name">CNAME</div>
                        <div class="product-price">PRICE</div>
                    </div>
                </div>
                        <div class="product">
                    <span class="image-container">
                        <img src="">
                    </span>
                    <div class="product-data" data-identifier="6">
                        <div class="product-name">ANAME</div>
                        <div class="product-price">PRICE</div>
                    </div>
                </div>
                        <div class="product">
                    <span class="image-container">
                        <img src="">
                    </span>
                    <div class="product-data" data-identifier="6">
                        <div class="product-name">BNAME</div>
                        <div class="product-price">PRICE</div>
                    </div>
                </div>
        </div>

uj5u.com熱心網友回復：

我建議使用另一種排序方法，先收集所有產品，然后排序，然后插入布局。

使用了 js 方法對“字串” localeCompare進行了正確排序，并使用了一種用于布局程式集的reduce。

var sortingSel = document.querySelector(".order");
var product = document.querySelectorAll("div[class='product']");
var productList = document.querySelector('.products');
var productArr = Array.from(product);

sortingSel.onchange = function(){
 
  var sortingOpt = parseInt(sortingSel.options[sortingSel.selectedIndex].value);
  
  newProductArr = productArr.sort(function(a, b) {
    const elemA = a.querySelector(".product-name").innerText;
    const elemB = b.querySelector(".product-name").innerText;
    
    if (sortingOpt === 2) {
      return elemA.localeCompare(elemB);
    } else {
      return elemB.localeCompare(elemA)
    }
  });
  
  newProductListArr = newProductArr.reduce(function(acc, elem) {
    return acc   elem.innerHTML;
  }, '');
  
  productList.innerHTML = newProductListArr;
}

<select style="padding: 10px;" class="order">
                        <option value="0">case 0</option>
                        <option value="1">case 1</option>
                        <option value="2">case 2</option>
                        <option value="3">case 3</option>
</select>


<div class="products">
                <div class="product">
                    <span class="image-container">
                        <img src="">
                    </span>
                    <div class="product-data" data-identifier="6">
                        <div class="product-name">CNAME</div>
                        <div class="product-price">PRICE</div>
                    </div>
                </div>
                        <div class="product">
                    <span class="image-container">
                        <img src="">
                    </span>
                    <div class="product-data" data-identifier="6">
                        <div class="product-name">ANAME</div>
                        <div class="product-price">PRICE</div>
                    </div>
                </div>
                        <div class="product">
                    <span class="image-container">
                        <img src="">
                    </span>
                    <div class="product-data" data-identifier="6">
                        <div class="product-name">BNAME</div>
                        <div class="product-price">PRICE</div>
                    </div>
                </div>
        </div>

標籤：javascript 循环

上一篇：根據另一個列的值創建新列

下一篇：如何在Julia中進行一定次數的迭代后停止for回圈