为什么我的 for 循环不增加 var i？ （更新）

Question

更新： 之前的标题是错误的，foor 循环是好的（可能）。 问题是我无法引用产品本身。最后 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>

Answer 1

我建议使用另一种排序方法，其中所有产品先收集，然后排序，然后插入到布局中。

使用方法 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>