jQuery create id's in array

Question

I'm trying to allow a user to enter in a number (i.e. 3 in the first div below) that will decide which div's to show in an output. I created an array of id's (or so I thought) based on the number entered. When I alert the array the id's look correct but for some reason when I try and show them in the function below nothing happens. This is very similar to this post: how to loop through an array of jquery objects and .hide() each of them but I can't re-create it. Any help would be greatly appreciated. Here's a fiddle: http://jsfiddle.net/dbeau79/4KzuN/

<div id="variable_1">3</div>

<div id="jinja_1" class="jinja">I'm Jinja 1</div>
<div id="jinja_2" class="jinja">I'm Jinja 2</div>
<div id="jinja_3" class="jinja">I'm Jinja 3</div>
<div id="jinja_4" class="jinja">I'm Jinja 4</div>
<div id="jinja_5" class="jinja">I'm Jinja 5</div>
<div id="jinja_6" class="jinja">I'm Jinja 6</div>    

$('.jinja').hide();    
var varStart = 1;
var varEnd = $('#variable_1').text();

var arr = [];

while (varStart <= varEnd) {
arr.push("'#jinja_" + varStart++ + "'");
}

$.each(arr, function () {
//alert(this);
$(this).show();
});

Gyandeep · Accepted Answer · 2014-02-22 04:16:18Z

0

this would solve your problem:

<div id="variable_1">3</div>

<div id="jinja_1" class="jinja">I'm Jinja 1</div>
<div id="jinja_2" class="jinja">I'm Jinja 2</div>
<div id="jinja_3" class="jinja">I'm Jinja 3</div>
<div id="jinja_4" class="jinja">I'm Jinja 4</div>
<div id="jinja_5" class="jinja">I'm Jinja 5</div>
<div id="jinja_6" class="jinja">I'm Jinja 6</div>    

//$('.jinja').hide();    
var varStart = 1;
var varEnd = $('#variable_1').text();

var arr = [];

while (varStart <= varEnd) {
arr.push("#jinja_" + varStart++ + "");
}

$.each(arr, function (i, elem) {
//alert(this);
$(elem).show();
});

answered Feb 22, 2014 at 4:16

Gyandeep

13.7k5 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

demux · Accepted Answer · 2014-02-22 04:20:23Z

0

I would use a completely different approach: http://jsfiddle.net/4KzuN/13/

<input type="number" value="3">

<ul>
    <li>I'm jinja 1</li>
    <li>I'm jinja 2</li>
    <li>I'm jinja 3</li>
    <li>I'm jinja 4</li>
    <li>I'm jinja 5</li>
</ul>

<script>
    $('input').on('keyup', function() {
        $('li').hide();
        $('li').eq(parseInt($(this).val(), 10) - 1).show();
    }).keyup();
</script>

answered Feb 22, 2014 at 4:20

demux

4,6742 gold badges36 silver badges59 bronze badges

1 Comment

DerickB Over a year ago

I should've been more clear but what I needed was to show all the elements that were in the array not just the last one. I like this code though and could use it as well. Thank you for your response.

jogesh_pi · Accepted Answer · 2014-02-22 04:26:14Z

0

Hope you want this:

var id = $('#variable_1').text();

$('[id*=jinja_]').hide();

// Step One
$('#jinja_' + id).show(function(){
    $(this).prevAll('div').show();
});

// Step Two
$('[id*=jinja_]').hide();
$('#jinja_' + id).show();
$('#jinja_' + id).prevAll('div').show();

Depends on you which one you like to use.

JSFIDDLE

edited Feb 22, 2014 at 4:26

answered Feb 22, 2014 at 4:16

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

1 Comment

DerickB Over a year ago

very tidy! This is a huge help as well. Thank you.

TimSPQR · Accepted Answer · 2014-02-22 04:29:40Z

0

Just a different approach - FIDDLE - not better than another other. Perhaps limited in older browsers.

CSS

.jinja {
    display: none;
}

JS

var mynumber = +$('#variable_1').html() + 1;

$('.jinja:nth-child('+ mynumber +')').css('display', 'block');

answered Feb 22, 2014 at 4:29

TimSPQR

3,0043 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery create id's in array

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related