Question

我有这个东西

<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:*元素？

Answer 1

这是使用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

Answer 2

我知道这可能不是你想要的，但你会考虑添加像

这样的东西

contains-data-action=true

对于您使用'data-action：'属性发送的每个锚点？只是查询一下？

属性上的jQuery通配符选择器

2 个答案:

Working JSFiddle