通过在选择器中使用逻辑OR选择带有jQuery的HTML元素

Question

At the moment I have this HTML structure:

...
<div data-is_array="t" data-simpletype="int">
    <input type="text">
</div>
<div data-is_array="t" data-simpletype="char">
    <input type="text">
</div>
<div data-is_array="t" data-simpletype="text">
    <textarea></textarea>
</div>
<div data-is_array="t" data-simpletype="real">
    <input type="text">
</div>
...

And this CoffeeScript using jQuery:

$('*[data-is_array="t"][data-simpletype="int"] :input').each ->
    simpleCopy($(this))
$('*[data-is_array="t"][data-simpletype="char"] :input').each ->
    simpleCopy($(this))
$('*[data-is_array="t"][data-simpletype="text"] textarea').each ->
    simpleCopy($(this))
$('*[data-is_array="t"][data-simpletype="real"] :input').each ->
    simpleCopy($(this))

In the HTML there are other inputs wrapped in div's with other data. What I want is to call simpleCopy on all inputs that have data-is_array="t" and data-simpletype is int , char , text or real .

My current solution works but is not realy nice. Is there a way to get all these elements with sth. like a logical OR selector to do this in one like:

$('*[data-is_array="t"][data-simpletype="int||char||text||real"] :input||textarea').each ->
    simpleCopy($(this))

I know there is a regex filter , but I don't want to use this because this is realy slow when I test this under Chrome. Is there a better jQuery method to do this?

Answer 1

I think a mix of multiple selector and find/filter will do

$('[data-is_array="t"]').filter('[data-simpletype="int"], [data-simpletype="char"], [data-simpletype="text"], [data-simpletype="real"]').find(':input').each -> 

Demo: Fiddle

Answer 2

You're complicating it too much.

<div id="foo">
  <div data-is_array="t" data-simpletype="int">
    <input type="text">
  </div>
  <div data-is_array="t" data-simpletype="char">
    <input type="text">
  </div>
  <div data-is_array="t" data-simpletype="text">
    <textarea></textarea>
  </div>
  <div data-is_array="t" data-simpletype="real">
    <input type="text">
  </div>
</div>

Wrap it all with a div

$(' #foo input, #foo textarea ').each(function() {
  your stuff ()...
});

You're good. Good programmers are lazy programmers.