Javascript 搜索元素

| | |

jQuery find () 方法可能聽起來很熟悉,但不要將它與 JavaScript find () 方法混淆! 兩者都是“查找”的東西,但它們是什麼回報可能非常不同。在 JavaScript 中,find() 方法只能在數組上調用。

需要回調函數,該函數是作為參數傳遞給方法的函數,稍後打電話。查找並返回第一個滿足回調函數中描述的要求的項目。

jQuery find() 方法完全不同。像所有 jQuery 方法一樣,它在選擇器上調用。在此選擇器中搜索並僅操作此選擇器的子元素。如果您想修改某些元素而不是包含在同一父元素中的其他元素,這種高級操作非常有用。

使用 jQuery find ()

我們現在知道 jQuery find() 用於選擇給定選擇器的所有子元素。查看一些代碼示例,了解如何使用 jQuery find ()

讓我們從簡單的開始,在接下來的部分中添加一些複雜性。我們可以在頁面加載後操作一個元素來演示 find () 是如何工作的。在頁面加載後更改段落上下文中某些單詞的顏色怎麼樣?我們將從這裡開始:

所有其他單詞都保持不變。

看看這段代碼,你會注意到

裡面有幾個<跨度>元素。 元素之一是

元素的子元素。另一個

<類面部=“WP-圖像塊”> 我們現在更改文本的顏色來說明 find () 的作用。這對初學者來說是一個很好的步驟,因為我們只需要修改一個 CSS 屬性來實現這一點。將元素

作為選擇器傳遞給 find(),我們可以使用jQuery的css()方法來進行顏色變化:

當第一次使用find()時,我們選擇了所有的元素

。我們使用 find () 來查找所有屬於

的子元素的 元素。在此示例中,它只是單詞 blue。然後我們使用 css() 方法將顏色改為藍色。

div>

關於find()的第二次使用,這次我們選擇綠色類的 的子元素。

同樣,這只是綠色的詞。至於第一行,我們使用 css ( ) 方法將顏色更改為綠色。

讓我們運行它,看看會發生什麼!

請注意,藍色和克reen 單詞包含在 span 元素中,但未分配任何類或 id。我們能夠再次分離這些詞並改變它們的顏色。您可能已經猜到了,這是因為 的主要元素不同。

是藍色單詞 的父元素。 是包含單詞 green 的 的父級。

這是因為 find () 找到用作選擇器的元素的子元素。讓我們添加有點複雜,看一個to-do list的例子。

jQuery find() in a list

在這個例子中,我們有一個to-do list。我們有事情要做今天,但我們也必須從商店購買東西才能做到這一點。一旦我們購買了這些物品,我們就可以將它們從清單中刪除並繼續我們的一天!這是我們的清單:

這裡有我們的列表。我們有

  • ; 元素“Go to Store”、“Take out the Trash”和“Do the dishes”作為