堆棧內存溢出
  簡體   English   中英

如何將標記為“價格”的所有 class 值存儲到一個數組中以便對它們進行排序？

[英]How do I store all my class values labeled "price" into an array so I can sort them?

 原文  2023-01-25 17:41:44  2   1    javascript

問題描述

我如何將所有價格值存儲到一個空數組中，以便我可以使用“排序：從低到高按鈕”對它們進行排序？ 我在網上看到的大多數 sort() 示例都有一個已經包含整數的數組，然后進行排序，但我的問題是我想將所有<h4> class 價格值存儲到一個數組中，然后進行排序。 我會以錯誤的方式解決這個問題嗎？ 

 function filterItems(e) { const items = document.querySelectorAll(".item"); //selects all menu items let filter = e.target.dataset.filter; //grabs value in the event target's data-filter attribute // if filter all button is clicked, loop through all items and remove the hidden class if (filter === "*") { items.forEach(item => item.classList.remove("hidden")); } else { //loops through all items items.forEach(item => { item.classList.contains(filter) //does item have the same data-filter in its class list? item.classList.remove('hidden') //if true?, make sure css class.hidden is NOT applied: item.classList.add('hidden'); // if false: does not have same filter tag, apply.hidden css class }); }; };
 *{ box-sizing:border-box; } body { background:#e5e5e5; color:#14213d; font-family: 'Montserrat', sans-serif; margin:0; } /* everything in the middle */.container { margin:auto; max-width:1170px; display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center; } h1{ margin-bottom:12px; } hr.solid { width:150px; border-top: 3px solid #fca311; } /* button styles */ button { padding: 6px 15px; font-weight:bold; border: 2px solid #14213d; color:#14213d; background-color:#e5e5e5; margin: 4px 2px; border-radius: 8px; transition-duration: 0.4s; cursor: pointer; } button:hover{ color:#fff; background-color:#14213d; } #flex-buttons { margin-top:10px; } /*CSS GRID Menu Section */.food-items-container { width: 90vw; /* it aligns the items inside their grid areas on the inline axis */ justify-items: center; display:grid; gap: 1rem 2rem; grid-template-columns:1fr 1fr; margin-top:50px; }.food-items-container img { width:220px; height:200px; object-fit:cover; border: 2.8px solid #fca311; } hr.border { width:100%; border:none; border-bottom: 1px solid #fca311; } /* Item Content */.item { display: grid; gap: 1rem 2rem; max-width: 25rem; }.item-info header { display: flex; /* Indents Price */ justify-content: space-between; }.item-info h4 { margin-top:5px; }.item-text { text-align:left; }.price { color:#fca311; }.hidden { display:none; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #e5e5e5; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: #14213d; padding: 6px; text-decoration: none; display: block; }.dropdown-content a:hover {background-color: #ddd;}.dropdown:hover.dropdown-content {display: block;}.dropdown:hover.dropbtn {background-color: #3e8e41;}.checked { color: orange; }.stars { text-align:left; margin-top:-10px; } @media screen and (min-width: 768px) {.item { grid-template-columns: 225px 1fr; gap: 0 1.25rem; max-width: 40rem; }.food-items-container img { height: 175px; } } @media screen and (min-width: 1200px) {.food-items-container { width: 95vw; grid-template-columns: 1fr 1fr; }.food-items-container img { height: 150px; } }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Restaurant-Menu-App</title> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel = "stylesheet" href= "style,css"> </head> <body> <div class ="container"> <h1>Our Menu</h1> <hr class="border"> <:--Filter Buttons --> <:--adding event listener to each of filters to call function: passing filter value --> <div id ="flex-buttons"> <button type ="button" class="filter" data-filter="*" onclick=filterItems(event)>All</button> <button type ="button" class="filter" data-filter="breakfast" onclick=filterItems(event)>Breakfast</button> <button type ="button" class="filter" data-filter="lunch" onclick=filterItems(event)>Lunch</button> <button type ="button" class="filter" data-filter="drink" onclick=filterItems(event)>Drinks</button> <button type ="button" class="filter" data-filter="dinner" onclick=filterItems(event)>Dinner</button> <div class="dropdown"> <button type ="button" class="dropbtn">Sort</button> <div class="dropdown-content"> <button type ="button" role ="btn" id="sort-price-low" onclick=>Sort. Price Low to High</button> <button type ="button" role ="btn" id="sort-price-high">Sort. Price High to Low</button> <a href="#">Sort. Rating</a> </div> </div> </div> <,-- Menu Section --> <div class="food-items-container"> <div class="item breakfast"> <img src="/img/avocado.jpg"> <div class="item-info"> <header> <h4>Avocado Toast</h4> <h4 class="price">$16.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Nesciunt ipsum dolor sit amet excepturi adipisicing elit. Repudiandae. sint quam, Et reprehenderit fugiat nesciunt inventore laboriosam excepturi. </p> </div> </div> <div class="item lunch"> <img src="/img/burger.jpg"> <div class="item-info"> <header> <h4>Big Burger</h4> <h4 class="price">$25.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Lorem consectetur dolor sit laboriosam elit. Repudiandae. sint quam, Et reprehenderit fugiat nesciunt. </p> </div> </div> <div class="item drink"> <img src="/img/gentleman.jpg"> <div class="item-info"> <header> <h4>The Gentleman</h4> <h4 class="price">$10.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Lorem reprehenderit dolor sit elit reprehenderit. Repudiandae. sint quam, Et reprehenderit fugiat. </p> </div> </div> <div class="item drink"> <img src="/img/marg.jpg"> <div class="item-info"> <header> <h4>Silly Margarita</h4> <h4 class="price">$12.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore. cum soluta nobis. </p> </div> </div> <div class="item drink"> <img src="/img/mojito.jpg"> <div class="item-info"> <header> <h4>Clean Mojito</h4> <h4 class="price">$13,99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi. </p> </div> </div> <div class="item drink"> <img src="/img/old,jpg"> <div class="item-info"> <header> <h4>Old Fashioned</h4> <h4 class="price">$13.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae. sint quam, Et reprehenderit fugiat nesciunt inventore laboriosam excepturi. Quo. officia. </p> </div> </div> <div class="item breakfast"> <img src="/img/om,jpg"> <div class="item-info"> <header> <h4>Cheddar Omelette</h4> <h4 class="price">$17,99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, </p> </div> </div> <div class="item breakfast"> <img src="/img/pancakes.jpg"> <div class="item-info"> <header> <h4>The Stacked Pancake</h4> <h4 class="price">$17.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Donec pede justo. fringilla vel. aliquet nec, vulputate eget. arcu, </p> </div> </div> <div class="item dinner"> <img src="/img/pasta.jpg"> <div class="item-info"> <header> <h4>Meat Pasta</h4> <h4 class="price">$28.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae. sint quam. Et reprehenderit fugiat nesciunt inventore laboriosam excepturi. Quo. officia, </p> </div> </div> <div class="item dinner"> <img src="/img/pizza.jpg"> <div class="item-info"> <header> <h4>Spinach Pizza</h4> <h4 class="price">$20,99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> </div> <hr class="border"> <p class="item-text"> Vivamus elementum semper nisi. </p> </div> </div> <div class="item lunch"> <img src="/img/salad.jpg"> <div class="item-info"> <header> <h4>Salad</h4> <h4 class="price">$12.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore laboriosam excepturi. Quo. officia, </p> </div> </div> <div class="item dinner"> <img src="/img/salmon.jpg"> <div class="item-info"> <header> <h4>Atlantic Salmon</h4> <h4 class="price">$30,99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Ut enim ad minima veniam. quis nostrum exercitationem ullam corporis suscipit laboriosam. nisi ut aliquid ex </p> </div> </div> <div class="item lunch"> <img src="/img/sandwhich.jpg"> <div class="item-info"> <header> <h4>BLT Sandwhich</h4> <h4 class="price">$20.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Repudiandae. sint quam, Et reprehenderit fugiat nesciunt inventore laboriosam excepturi. Quo. officia. </p> </div> </div> <div class="item dinner"> <img src="/img/steak.jpg"> <div class="item-info"> <header> <h4>Steak Filet</h4> <h4 class="price">$38,99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> </div> <hr class="border"> <p class="item-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore laboriosam excepturi. Quo. officia, </p> </div> </div> <div class="item breakfast"> <img src="/img/waffle,jpg"> <div class="item-info"> <header> <h4>Strawberry Waffle</h4> <h4 class="price">$17.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> </div> <hr class="border"> <p class="item-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore laboriosam excepturi! Quo, officia. </p> </div> </div> <div class="item lunch"> <img src="/img/wrap.jpg"> <div class="item-info"> <header> <h4>Thai Chicken Wrap</h4> <h4 class="price">$21.99</h4> </header> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <hr class="border"> <p class="item-text"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. </p> </div> </div> </div> </div> <script src="script.js"></script> </body> </html>

1 個解決方案

解決方案1
 1  2023-01-25 17:53:36

以下是如何使用 JavaScript 將帶有 class “價格”的 h4 元素的值存儲在數組中，然后對數組進行排序：

//Select all h4 elements with class "price"
const priceElements = document.querySelectorAll("h4.price");
//Create an empty array to store the prices
let prices = [];
//Loop through the h4 elements and push the text content to the prices array
priceElements.forEach(price => {
    prices.push(parseFloat(price.textContent)); //parsing the float value
});
//Sort the prices array in ascending order
prices.sort((a, b) => a - b);

//For descending order
prices.sort((a, b) => b - a);

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何對對象進行排序，以使所有值都按升序排列？ 我有一些 class 的實例，我將它們放入一個數組中。 我可以遍歷數組並更新所有數組對象的價格嗎？ 如何從本地存儲中獲取特定數據，以便在 JavaScript 中以模態顯示它們？ 我如何從表的每一行獲取值並將其存儲在js數組中 如何在JavaScript中從json數組中添加所有價格元素 如何將所有值存儲在 localstorage 中，以便它不會在每次點擊后重置？ 如何初始化所有共享一個類的 DOM 元素並將它們存儲在一個對象中？ 如何獲取我的音節，以便我可以對它們進行控制台記錄 如何分隔文本框的值，以便我可以按每個值排序 如何對JSON數組進行排序？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM