jQuery wildcard selector on attributes

Question

I have this stuff

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

And I was able to get individual attributes by this selectors:

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

How can I get all data-action:* elements?

Maybe I'm mistaken, but aren't `action:edit` and `action:delete` invalid HTML attributes? — Benjamin Gruenbaum, May 18 '13 at 12:07
HTML 5 explicitly allows custom attributes that begin with data. So, for example, `
Hello
` is valid. It's only a example for this case. http://stackoverflow.com/questions/992115/custom-attributes-yea-or-nay — Ragen Dazs, May 18 '13 at 12:09
I know about `data-*` attributes (and I think they're a broken approach but that's another story). If you use them though, you can use `.data` in jQuery which will resolve your issue. If I were you I'd consider something like KnockoutJS or EmberJS or AngularJS over jQuery for this sort of thing. — Benjamin Gruenbaum, May 18 '13 at 12:10

score 2 · Accepted Answer · answered May 18 '13 at 12:19

Here is an alternative solution using KnockoutJS instead of jQuery for doing this sort of thing (Binding actions to elements).

Instead of storing the data in the DOM we'll be storing it in JavaScript objects.

I know this is not exactly what you were looking for, but I think it provides a cleaner solution to the underlying problem.

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

Thanks for your example - I will study with attention. For now will change my approch to `[EDIT]` and `$('[data-action]')`solves my problem using I simple `.split(':')`! — Ragen Dazs, May 18 '13 at 12:24

score 0 · Answer 2 · answered May 18 '13 at 12:16

0

I know it may not be what you're looking for but would you consider adding something like

contains-data-action=true

for every anchor you send with a 'data-action:' attribute? And just query on that?

answered May 18 '13 at 12:16

anomaaly

833
4
15

3

Or `data-contains-action`, to stick to html5 naming conventions. – nnnnnn May 18 '13 at 12:17

jQuery wildcard selector on attributes

2 Answers2

Working JSFiddle