使用 jquery 按特定模式选择元素答案

【问题标题】：Select an element by particular pattern with jquery使用 jquery 按特定模式选择元素
【发布时间】：2022-01-12 02:08:05
【问题描述】：

我有一堆包含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）。如何使用 my-page-**-button 之类的 data-testid 获取所有元素？

【问题讨论】：

似乎更好的命名方案会使这更容易。 ;)
如果你在选择器中也包含按钮标签就足够简单了

标签： javascript jquery css

【解决方案1】：

要么包括按钮

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>

【讨论】：

【解决方案2】：

使用 prefix AND Suffix 选择。

$("[data-testid^='my-page-'][data-testid$='-button']")

一般规则

执行与：不要在选择器之间保留空格
累积与：将, 放在选择器之间

您需要 Execulsive AND

【讨论】：

【解决方案3】：

我认为这可以满足您的需要：

$('[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>

【讨论】：