jquery - any way to hide any class that is less than 3? for instance

Question

I want to have a bunch of spans with classes of different "depths", i.e one may be depth 1, another depth 2, another depth 3.

<span class="depth1"></span>
<span class="depth2"></span>
<span class="depth3"></span>

Then, if I want to hide anything that's below depth 3, I don't know how else to do it besides a for loop

for (i = 1; i <= 2; i++)
  $(".depth" + i).hide();

Is there any better way to do this? maybe class ="3" instead of "depth3"? And any way to allow floating points, so that 2.5 and 1.5 will both be hidden too?

Answer 1

Try this:

$("span").each(function(){
    var depth = $(this).attr("class").split("-");
    if (depth[1]<3) {
        $(this).hide();
    }
});

Answer 2

A bit of improvements to Jason's solution.

$('span[class*=depth]').each(function() {

    var matches = $(this).attr('class').match(/(^|\s)depth(\d+(.\d+)?)/);

    // matches[0] has the whole match
    // matches[1] has either empty string (beginning of the string) or a space
    // matches[2] has the actual depth value (with fracture part if present)
    // matches[3] has the fracture part of the depth name

    if (matches[2] !== undefined && matches[2] < 3) {
        $(this).hide();
    }
});

Improvements:

• the selector will filter all span's that doesn't have depth keyword in their class attribute (this won't prevent from matching class names like mydepth, depthtest but these are filtered by in the next step)
• this will match floating point depths as well (although I'm not sure if depth1.5 is a correct class name)
• this will work ok if you have more then just depth* class defined for element

Answer 3

Personally, I heart any class that is less than three.

Answer 4

For doing it with enumerated class names, I would create a "range" function, to generate a vaild selector:

function range(start, end, prependText){
  var result = [];
  for (var i = start; i < start + end; i++){
    var element = (prependText||'') + i;
    result.push(element);
  }
  return result.join();
}

var mySelector = range(1,3,'.depth'); // will return ".depth1,.depth2,.depth3"
//...
                 range(3,3,'.depth'); // returns ".depth3,.depth4,.depth5"

It will return a valid multiple selector that you can use to match the elements.

Another approach I think you might can use is the less than selector (lt), this selector matches elements based on its index:

$("span:lt(3)") // will match the first three spans, with index 0, 1, and 2

If your span elements are contained in other parent element, you can use this selector like this:

$('#container span:lt(3)') // match the first three span childs of the container element

Answer 5

Don't pollute your markup with useless classes when there is a better way to go.

If your <span>s are within the same parent element, as such:

<div class="spancontainer">
  <span></span>
  <span></span>
  <span></span>
</div>

You can hide the first two <span> with the :lt(index) pseudo-selector:

$('.spancontainer span:lt(2)').hide();

If your <span>s are not within the same parent element, simply assign them a special class as such:

<div>
  <span class="depth"></span>
  <span class="depth"></span>
  <span class="depth"></span>
</div> 
<span class="depth"></span>
<span class="depth"></span>

Then, you can still hide the first two <span> by using the :lt(index) pseudo-selector:

$('span.depth:lt(2)').hide();

Using this approach makes your code more maintainable (no need to keep track of index to insert or delete), wastes less bytes (it is important when you are on dailup) and is generally cleaner.

---

EDIT: And if you are trying to display a tree-like structure, you are better of using nested tags instead of your current markup.