我有一堆包含data-testid屬性的元素。
把它們想象成這樣：
<div data-testid="my-page">
<div data-testid="my-page-content"></div>
<div data-testid="my-page-footer">
<button data-testid="my-page-action-button">Do something</button>
<button data-testid="my-page-cancel-button">Cancel</button>
</div>
</div>
對于我的一項測驗，我需要通過它們的資料測驗 ID 模式找到按鈕。
如您所見，它是my-page-**-button。
我需要知道如何相應地調整我的選擇器，以便我獲取my-page以button.
到目前為止，我一直在做：
$("[data-testid^='my-page-']")
不幸的是，這將抓住my-page-content（或my-page-footer）。如何使用 data-testids 獲取所有元素，例如my-page-**-button？
uj5u.com熱心網友回復：
要么包括按鈕
button[data-testid^='my-page-']
或包括末端
[data-testid^='my-page-'][data-testid$='button']
console.log($("button[data-testid^='my-page-']").length);
console.log($("[data-testid^='my-page-'][data-testid$='button']").length);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-testid="my-page">
<div data-testid="my-page-content"></div>
<div data-testid="my-page-footer">
<button data-testid="my-page-action-button">Do something</button>
<button data-testid="my-page-cancel-button">Cancel</button>
</div>
</div>uj5u.com熱心網友回復：
選擇前綴AND后綴。
$("[data-testid^='my-page-'][data-testid$='-button']")
一般規則
- Execulsive AND : 不要在選擇器之間保留空格
- 累積與：放在
,選擇器之間
你在這里需要執行 AND
uj5u.com熱心網友回復：
我認為這可以滿足您的需求：
$('[data-testid^=my-page-][data-testid $=button')
下面是一個作業演示，如果您需要其他東西，請告訴我。
演示
// Select using start and end selectors
$('[data-testid^=my-page-][data-testid $=button').each( function() {
console.log($(this).attr("data-testid"));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-testid="my-page">
<div data-testid="my-page-content"></div>
<div data-testid="my-page-footer">
<button data-testid="my-page-action-button">Do something</button>
<button data-testid="my-page-cancel-button">Cancel</button>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375043.html
標籤：javascript 查询 css
上一篇：垂直交錯div
下一篇：使用flexbox創建回應式布局