0

I know with JavaScript (jQuery, anyway), you can specify an element based on what its ID begins with, what it ends with, or the whole shebang, but what about a combination of what it begins with and ends with?

I have brute-forish code like this:

   if (nextD8 == 2) {
      //  There mus be a way to perform removeClass() on all ids that begin with "td" and end with "N", right?
      $("#tdDate2").removeClass("hide");
      $("#tdAirfare2").removeClass("hide");
      . . .
      $("#tdgrandtotaldate2").removeClass("hide");
   }

...which I'd like to reduce to something like:

if (nextD8 == 2) {
    $("#td~2").removeClass("hide");
}

...where the tilde means "whatever/anything". Is this possible?

I don't need/want a CSS solution, but a Javascript one, as I need to remove a class via Javascript.

UPDATE

The solution, inspired by showdev, allows the previous long-winded code to be replaced by: 

if (nextD8 == 2) {
   $('td[id^="td"][id$="2"]').removeClass("hide");
}
. . .

UPDATE 2

I minified the logic down to this:

   var selstr = 'td[id^="td"][id$="' + nextD8 + '"]';
   $(selstr).removeClass("hide");
   if (nextD8 == 6) {
      $("#addDate").hide();
   }

...which is enough to allow the user to continue "adding" (unhiding) columns 2..6, and thereafter hiding the "Add New Date" button.

B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
  • 1
    What does this have to do with Meteor? As it is currently written Meteor does not come into play. – Kyll Sep 10 '15 at 17:12
  • Perhaps a regex match ? Ofcourse there might be another way but that's the first thing that came into my mind. – Onilol Sep 10 '15 at 17:12
  • 2
    The other question was about CSS, but the answer is still valid. Use `document.querySelectorAll(selector)` to find all elements matching a CSS selector. – Tobias Sep 10 '15 at 17:16
  • 1
    But really, why aren't you simply using a separate class for this? Sounds like that's exactly what you want to do instead of some elaborate IDs. – Etheryte Sep 10 '15 at 17:18
  • 1
    Or even jQuery, *as you are already doing*. – BoltClock Sep 10 '15 at 17:18
  • @Nit: Not sure what you mean; I *am* using a hide class in the HTML, but in this particular situation need to then remove the class. So I have to designate all elements which have that class and follow this specific pattern, so that I can remove that ("hide") class. The elements are at first hidden, but can be shown with a user action. – B. Clay Shannon-B. Crow Raven Sep 10 '15 at 17:21
  • @BoltClock: Yes, jQuery would be fine; I just need to know how (if possible) to identify all elements that begin with "td" and end with "2" using jQuery, or JavaScript. – B. Clay Shannon-B. Crow Raven Sep 10 '15 at 17:22
  • 1
    [Example here](http://jsfiddle.net/3kerfgsr/1/), based on an [answer](http://stackoverflow.com/questions/16009755/how-to-select-all-elements-whose-id-starts-and-ends-with-specific-strings#answer-16009756) at the linked topic. – showdev Sep 10 '15 at 17:24
  • @showdev: Based on your based on, this does work: $('td[id^="td"][id$="6"]').removeClass("hide"); (where "6" can be 2,3,4, or 5 also). Make that an answer, and I'll mark it as such. – B. Clay Shannon-B. Crow Raven Sep 10 '15 at 17:44
  • I don't think this is really a duplicate; the solution differs from the other enough...whatever. – B. Clay Shannon-B. Crow Raven Sep 10 '15 at 17:51
  • Can you post the solution as an answer or is it blocked? – A.L Sep 10 '15 at 18:01
  • @B.ClayShannon You may be right. In my opinion, your question is about the selector, which is the same for CSS and JavaScript. But please vote to re-open if you feel it's right. – showdev Sep 10 '15 at 18:04
  • @A.L: Answering is blocked, but I added two Updates to the question. – B. Clay Shannon-B. Crow Raven Sep 10 '15 at 18:11

0 Answers0