Partial selection of a class with jQuery

Asked

Viewed 84 times

3

Hello,

I would like to know if it is possible to select a class/element from a partially informed value, for example:

<div class="chart-piso c100 p100 orange big">
   <span id="percPiso">100%</span>
   <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
   </div>
</div>

I would like to select the elements only by stating that the classes contain the p before the numbers because those numbers are variable.

I tried to select them this way and I know it’s super wrong too haha:

$("div[class*='chart-']").removeClass(div[class*='p']);

Any suggestions?

Thank you!

javascript jquery

  • is in fact the type of search I need @Pedrocamarajunior, but I’m not able to put fit my code, follow how I tried to do: $("div[class^='chart-']").removeClass("div[class^='p']");

  • I think I get it, you need to select the div which contains the class chart-piso and remove from that div the class p100. That’s it?

  • @Pedrocamarajunior that contains only "Chart-" because pisois variable and always remove the div that contains a class started with p

  • 1

    Yes, I understood, it was just to use your example with example. But problem solved, I removed my closing vote. :)

3 answers

5


If I understand what you’re trying to do, you can use regex to remove the class that starts with p and have numbers later, something like that:

$("div[class^='chart-']").removeClass(function(index, className) {
  return (className.match(/(p[0-9]+)/g) || []).join(' ');
});
console.log($("div[class^='chart-']").attr("class"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-piso c100 p150 orange big">
  <span id="percPiso">100%</span>
  <div class="slice">
    <div class="bar"></div>
    <div class="fill"></div>
  </div>
</div>

  • the console returned me the following: Uncaught SyntaxError: Unexpected token ^=

  • 2

    worked perfectly!! Thank you very much!

  • 1

    A hint would be to use the expression: /\bp\d+\b/g (with word Boundary) If you want classes such as .p100s are not removed.

3

The @Lucas Costa answer already solves your problem in a great way, I’ll just post another possible way using the String.replace().

var $divChart = $("div[class^='chart-']");
var divClasses = $divChart.prop('class');

$divChart.prop('class', divClasses.replace(/\p[0-9]{3}/g, ''));

console.log('Classes da div: ' + $divChart.prop('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-piso c100 p100 orange big">
   <span id="percPiso">100%</span>
   <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
   </div>
</div>

2

An alternative to @pedro-camara-junior’s response with pure JS, certain that it was requested with jQuery, but sometimes not quite necessary, would be the use of the querySelector():

var el = document.querySelector('div[class^=chart-]');
el.className = el.className.replace(/\b(^|\s)p\d+\b/g, '');

console.log("res: " + el.className);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-piso c100 p100 orange big">
   <span id="percPiso">100%</span>
   <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
   </div>
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.