通過屬性選擇HTML節點dommy

在ClojureScript中使用dommy，如何通過屬性選擇節點？例如，在jQuery中，這看起來像$('tr[data-id=1]')。我試圖(sel1 "tr[data-id=1]")但我得到這個錯誤：通過屬性選擇HTML節點dommy

Uncaught SyntaxError: Failed to execute query: 'tr[data-id=1]' is not a valid selector.

這可能與dommy？如果不是，ClojureScript中最好的選擇是什麼？ jayq？

樣本HTML：

<table> 
    <tr data-id="1"> 
    <td>Cow</td> 
    <td>Moo</td> 
    </tr> 
</table>

來源

2014-01-09 Riley Watkins

你可以在這裏發佈你的html部分嗎？ –

@KrishR添加了示例HTML。 –

如果你已經爲你的問題得到了答案，那麼標記正確的答案總是善意的，即使它是你的;） – yonki

Dommy使用document.querySelectorAll引擎蓋，這需要屬性在選擇值加引號下。

(sel1 "tr[data-id='1']")

如果你不想使用引號，至少有兩個簡單的選擇：

goog.dom.query已經可以在ClojureScript的依賴和支持屬性選擇。

(ns example 
    (:require [goog.dom.query :as query])) 

(query "tr[data-id=1]")

jayq是jQuery的包裝。將[jayq "2.5.0"]加入您的project.clj即可使用它。

(ns example 
    (:require [jayq.core :refer [$]])) 

($ "tr[data-id=1]")

（感謝yonki您指出引號是必要的。）

來源

2014-01-09 09:37:22

冷靜下來的傢伙，這是可能容易。檢查驗證碼：

(sel1 "tr[data-id=\"1\"]")

有一個在你的HTML代碼<tr data-id="1">。您看到data-id值是用引號引起來的。你只需在你的選擇器中加入引號，一切都會好的。 \"是引號引起來的。希望這是可以理解的。

最後：Dommy在需要時使用querySelectorAll，因此您可以使用瀏覽器能夠識別的每個CSS選擇器。

來源

2014-01-09 10:41:29 yonki

你是對的。 'querySelectorAll'要求屬性值在引號中，這就是爲什麼它不起作用。其他庫在解析選擇器時更寬鬆，這很好。（順便說一句，您可以在選擇器中使用單引號以避免必須使用雙引號：'（sel1「tr [data-id ='1']」）'。） –

這種方法也可以工作！

(ns dosync2.core 
    (:require [dommy.utils :as utils] 
      [dommy.core :as dommy] 
      [dommy.attrs :as dattr]) 
    (:use-macros 
    [dommy.macros :only [node sel sel1]])) 

(defn select-by-tag-and-attr-value [the-tag the-attr the-attr-value] 
    (let [tag-selection (sel the-tag)] 
    (filter #(= the-attr-value (dattr/attr % the-attr)) tag-selection) 
    ) 
) 

(. js/console (log (clj->js (select-by-tag-and-attr-value :tr :data-id 1))))

來源

2014-01-09 10:52:08 tangrammer

通過屬性選擇HTML節點dommy

回答

相關問題