Question

在ClojureScript中使用dommy，如何按属性选择节点？例如，在jQuery中，这看起来像$('tr[data-id=1]')。我试过了(sel1 "tr[data-id=1]")，但我收到了这个错误：

未捕获的SyntaxError：无法执行查询：'tr [data-id = 1]'不是有效的选择器。

这可能与dommy一起吗？如果没有，ClojureScript中最好的选择是什么？ jayq？

示例HTML：

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

Answer 1

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指出引号是必要的。）

Answer 2

冷静下来，这很容易。检查此代码：

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

查看您的HTML代码<tr data-id="1">。您看到data-id值在引号中。你只需要在选择器中包含引号，一切都会好的。 \"是转义引号。希望这是可以理解的。

最后：Dommy在需要时使用querySelectorAll，因此您可以使用浏览器识别的每个CSS选择器。

Answer 3

这种方法也可以起作用！

(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))))

使用dommy按属性选择HTML节点

3 个答案: