CODEWITHSUNDEEP
jqueryrangehidechildren
DeanH
DeanH

Reputation: 523

Hide a certain range of children jQuery

I'm building a common header for a bunch of pages and passing in variables to set heading text, etc. I have a breadcrumb menu, and I want to only show the appropriate number of steps for the page. So here's my menu html:

<ol id="meter" class="">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ol>

Then I have a function that looks like this:

function levels() {
$("#meter").addClass(stepNumber);
}

On Page one, I'm setting the class to "one", on page two to "two", etc.

If the class is "one", I want to show only the first item. If it's "two", I only want to show the first and second, etc.

I know I could do something with css where I write a style for each class, but that seems kind of silly. How would I do this with jQuery instead?

Upvotes: 2

Views: 789

Answers (3)

freethinker
freethinker

Reputation: 2425

You can add relevant classes for each page. For example : "page_1", "page_2"...

<ol id="meter" class="">
<li class="page_1">Page 1</li>
<li class="page_2">Page 2</li>
<li class="page_3">Page 3</li>
<li class="page_4">Page 4</li>
</ol>

add this css:

#meter li{display:none;}

And a script will be:

function currentPage(pageNum){ 
        $("#meter li").each(function(){
            if(parseInt($(this).attr("class").split("_")[1]) <= pageNum){
                $(this).show();
            }else{
                $(this).hide();
            }
        })
    }

You will triger it like this: 

currentPage(3);

Here is jsfiddle example: https://jsfiddle.net/216tw9u7/

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try setting className to 1, 2 -> 100 , and utilizing :gt() Selector selector

function levels(stepNumber) {
  $("#meter").addClass(stepNumber)
    .find("li:gt(" + (stepNumber - 1) + ")")
    .hide();
}

levels(2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ol id="meter" class="">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
</ol>

Alternatively, to maintain adding className as one, two -> onehundred, could create an object to represent number of items to show for each class

var keys = {
  1: "one",
  2: "two",
  3: "three",
  4: "four"
};

function levels(stepNumber) {
  $("#meter").addClass(keys[stepNumber])
    .find("li:gt(" + (stepNumber - 1) + ")")
    .hide();
}

levels(2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ol id="meter" class="">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
</ol>

Upvotes: 3

grill
grill

Reputation: 1170

Why not use a for loop coupled with some jQuery to set the relevant number of elements to a displayed state? For example:

var count = // number from class
var listElements = $('#meter').children()
for (i = 0; i < count; i++) {
    $(listElements[i]).addClass('active');
}

Here, the 'active' class would have a display property attached to it. Does this make sense to you?

Note that you would need to edit child class names so that they could be used as indices in the for loop.

Upvotes: 0

Related Questions