[英]Why my for loop doesn't increment the var i? (UPDATED)
UPDATE: the before-title is wrong, the foor loop is ok (probably).更新:before-title 是错误的,for 循环没问题(可能)。 The problem is that I can't make a reference to the product itself.
问题是我无法参考产品本身。 At the last if (if(notItsPlace)) it's not the productArr[i].parentNode I have to use but the product-name, but I need to sort the products themselves.
最后 if (if(notItsPlace)) 它不是我必须使用的 productArr[i].parentNode 而是产品名称,但我需要自己对产品进行排序。 So the new question is:
所以新的问题是:
How to make a reference to an element that's two levels up?如何引用两个级别的元素?
Hi everyone, I'm new in JavaScript and have a quick question: In my code below the foor loop does not increment the var i but stucks in an infinite loop.大家好,我是 JavaScript 新手,有一个简单的问题:在我下面的代码中,for 循环不会增加 var i 而是陷入无限循环。 I'm sure something is out of order but can't figure it out what.
我确定有些东西出了问题,但无法弄清楚是什么。
The task is to place the product items in alphabetical order (and many other), and the products in this case are not coming from a database but it's written in the HTML (I know).任务是按字母顺序(和许多其他顺序)放置产品项目,在这种情况下,产品不是来自数据库,而是用 HTML 编写的(我知道)。 Can't edit the HTML and would not like to use JQuery.
无法编辑 HTML 并且不想使用 JQuery。
Thank you in advance!先感谢您!
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>
I propose to use another sorting method, in which all the products are first collected, then sorted and then inserted into the layout.我建议使用另一种排序方法,先收集所有产品,然后排序,然后插入布局。
There used method js for right sorting 'String' localeCompare and a reduce for the layout assembly.使用了 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.