使用 dommy 按属性选择 HTML 节点答案

【问题标题】：Select HTML node by attribute with dommy使用 dommy 按属性选择 HTML 节点
【发布时间】：2014-01-12 05:08:59
【问题描述】：

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

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

dommy 可以吗？如果没有，ClojureScript 中最好的选择是什么？周杰伦？

示例 HTML：

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

【问题讨论】：

你能把你的html部分贴在这里吗？
@KrishR 示例 HTML 添加。
如果您的问题得到了答案，最好标记正确的答案，即使它是您的 ;)

标签： jquery dom-manipulation clojurescript

【解决方案1】：

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

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

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

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

【讨论】：

你是对的。 querySelectorAll 要求属性值用引号引起来，这就是为什么它不能正常工作的原因。其他库在解析选择器方面更为宽松，这很好。（顺便说一句，您可以在选择器中使用单引号以避免转义双引号：(sel1 "tr[data-id='1']")。）

【解决方案2】：

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

【讨论】：

【解决方案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))))

【讨论】：