如何利用 jQuery 根據資料屬性值來尋找 HTML 元素？

在 jQuery 中透過資料屬性值尋找元素

在 HTML 中，資料屬性用於儲存 JavaScript 可以使用的信息， CSS。要根據資料屬性值存取元素，jQuery 提供了多種選項。

屬性等於選擇器

最直接的方法是使用屬性等於選擇器：

$('.slide-link[data-slide="0"]').addClass('active');

此選擇器匹配具有特定資料屬性和特定值的元素。在這種情況下，它將選擇 data-slide="0" 的元素並向其新增 active 類別。

使用.find() 方法

另一種方法是使用.find() 方法在匹配元素中搜尋後代元素：

$('.slide-link').find('[data-slide="0"]').addClass('active');

但是，此方法搜尋後代，而不是父元素。在這種情況下它不起作用，因為目標元素是我們正在搜尋的元素的父元素。

理解 .find() 方法

.find () 方法旨在向下遍歷 DOM 樹，搜尋與指定選擇器相符的後代元素。它不會搜尋父元素。

<!-- HTML Code -->
<div class="container">
  <p>Paragraph 1</p>
  <div class="nested-container">
    <p>Nested Paragraph</p>
  </div>
</div>

<!-- jQuery Code -->
$('.container').find('p').text('Hello World');

在此範例中，.find('p') 將搜尋所有

元素。 .container 的子元素。它不會匹配

嵌套容器內的元素，因為它不是 .container 的直接子級。

以上是如何利用 jQuery 根據資料屬性值來尋找 HTML 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！