属性上的 jQuery 通配符选择器

Posted 2023-03-05

【中文标题】属性上的 jQuery 通配符选择器

【英文标题】：jQuery wildcard selector on attributes

【发布时间】：2013-05-13 12:11:18

【问题描述】：

我有这个东西

<table>
  <tr>
    <td>
      foo
    </td>
    <td>
      <a href="#" data-action:edit="1">[EDIT]</a>
      <a href="#" data-action:delete="1">[DEL]</a>
    </td>
  </tr>
  <tr>
    <td>
      bar
    </td>
    <td>
      <a href="#" data-action:edit="2">[EDIT]</a>
      <a href="#" data-action:delete="2">[DEL]</a>
    </td>
  </tr>
  <tr>
    <td>
      foobar
    </td>
    <td>
      <a href="#" data-action:edit="3">[EDIT]</a>
      <a href="#" data-action:delete="3">[DEL]</a>
    </td>
  </tr>
</table>

而且我能够通过这个选择器获取单个属性：

$('[data-action\\:edit]') 或$('[data-action\\:delete]')

如何获取所有data-action:* 元素？

【问题讨论】：

也许我记错了，但 action:edit 和 action:delete 不是无效的 html 属性吗？

HTML 5 明确允许以数据开头的自定义属性。因此，例如，<p data-date-changed="Jan 24 5:23 p.m.">Hello</p> 是有效的。这只是本案的一个例子。 ***.com/questions/992115/custom-attributes-yea-or-nay

我知道data-* 属性（我认为它们是一种错误的方法，但这是另一回事）。如果你使用它们，你可以在 jQuery 中使用 .data 来解决你的问题。如果我是你，我会考虑使用 KnockoutJS 或 EmberJS 或 AngularJS 而非 jQuery 来处理这类事情。

【参考方案1】：

我知道这可能不是您想要的，但您会考虑添加类似的东西

contains-data-action=true

对于您发送的每个带有“data-action:”属性的锚点？并且只是查询那个？

【讨论】：

或data-contains-action，遵守 html5 命名约定。

【参考方案2】：

这是使用 KnockoutJS 而不是 jQuery 来执行此类操作（将操作绑定到元素）的替代解决方案。

我们不会将数据存储在 DOM 中，而是将其存储在 javascript 对象中。

我知道这不是您想要的，但我认为它为潜在问题提供了更简洁的解决方案。

HTML：

<table>
    <tbody data-bind="foreach: elements">
        <tr>
            <td data-bind="text: name"></td>
            <td> 
                <a href="#" data-bind="click: $root.edit">[EDIT]</a>
                <a href="#" data-bind="click: $root.del">[DEL]</a>
            </td>
        </tr>
    </tbody>
</table>

JavaScript：

function tElement(name)
    this.name = name;


function ViewModel(arr)
    var self=this;
    this.elements = ko.observableArray(arr);
    this.del = function(elem)
        self.elements.remove(elem);
    
    this.edit = function(elem)
        alert("edit called on element with name "+elem.name);    
    


var vm = new ViewModel([new tElement("foo"),new tElement("bar"),new tElement("foobar")]);

ko.applyBindings(vm);

Working JSFiddle

【讨论】：

感谢您的示例 - 我会认真学习。现在将我的方法更改为<a href="#" data-action="edit:1">[EDIT]</a> 和$('[data-action]')使用简单的.split(':') 解决我的问题！