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以＆＃39; product＆＃39;开头，但＆＃39; *＆＃39;不会＆＃39;为我工作......）

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

(And some unnecessary event listeners...)

现在我的问题是：如何获取所有以＆＃39; product＆＃39;开头的元素ID ？

Answer 1

Attribute Selectors将提供您正在寻找的内容。它们与git reset HEAD~2 --hard和document.querySelectorAll一起使用。

在您的情况下，您可以指定以product：

开头的属性ID

document.querySelector

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

也是这样！

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何获取以子字符串开头的所有elementID

5 个答案: