如何獲取以子字符串開頭的所有元素ID

Question

我有這個代碼：

HTML：

<div class="lists">
    <div class="list 1">
        <div id="productCheese">Cheese</div>
        <div id="productBread">Bread</div>
        <div id="productMilk">Milk</div>
        <div id="productEgg">Egg</div>
        <div id="addProduct">Add new product to list...</div>
    </div>
    <div class="list 2">
        etc...
    </div>
</div>

和 JavaScript：（我想獲取 ID 以“product”開頭的所有元素，但“*”對我不起作用......）

var node = document.getElementById("product"*);

(And some unnecessary event listeners...)

現在我的問題是：如何獲取所有以“product”開頭的 elementID ？

Answer 1

屬性選擇器將提供您正在尋找的內容。 它們與document.querySelector和document.querySelectorAll 。

在您的情況下，您可以指定以 product 開頭的屬性 id：

var nodes = document.querySelectorAll('[id^=product]');

工作示例：

 var nodes = document.querySelectorAll('[id^=product]'); console.log(nodes);

 <div class="lists"> <div class="list 1"> <div id="productCheese">Cheese</div> <div id="productBread">Bread</div> <div id="productMilk">Milk</div> <div id="productEgg">Egg</div> <div id="addProduct">Add new product to list...</div> </div> <div class="list 2"> etc... </div> </div>

Answer 2

好吧，你有偽代碼； "product"*是解析錯誤。

您需要通過querySelectorAll使用選擇器。

document.querySelectorAll('[id^="product"]');

這將返回一個nodelist ，然后您可以對其進行迭代並按照您的意願進行操作。

Answer 3

您不需要為每個 div 提供唯一的 id。 只需給他們class="product"並使用document.querySelectorAll('.product')

Answer 4

我已經測試了這段代碼並得到了理想的結果

 var matches = []; var searchEles = document.getElementById("listone").children; for(var i = 0; i < searchEles.length; i++) { if(searchEles[i].id.includes('product')){ matches[i]=searchEles[i]; } } console.log(matches);

 <div class="lists"> <div class="list 1" id="listone"> <div id="productCheese">Cheese</div> <div id="productBread">Bread</div> <div id="productMilk">Milk</div> <div id="productEgg">Egg</div> <div id="addProduct">Add new product to list...</div> </div> <div class="list 2"> etc... </div> </div>

Answer 5

也用那種方式！

 var IDs = []; $("#list").find("div").each(function(){ if(this.id.includes('product')){ IDs.push(this.id); } }); console.log(IDs);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="lists" id="list"> <div class="list 1" id="listone"> <div id="productCheese">Cheese</div> <div id="productBread">Bread</div> <div id="productMilk">Milk</div> <div id="productEgg">Egg</div> <div id="addProduct">Add new product to list...</div> </div> <div class="list 2" id="listtwo"> <div id="productCheese">Cheese</div> <div id="productewqewewew">Bread</div> <div id="productrerereilk</div> <div id="producttrtytrut">Egg</div> <div id="addProductccc">Add new product to list...</div> </div> </div>