Access variables outside the jQuery .each() loop

Question

I have a little bit complicated html structure. I parse it to get this stuff:

Option1: value
Option2: value

from this like html:

<div class="option" id="option-691">
<span class="required">*</span>
<b>Option:</b><br>
<input type="radio" checked="" id="option-value-1250" value="1250" price="1156.0000" name="option[691]">
<label for="option-value-1250">2,35 xx - 1156.00 </label>
<br>
<input type="radio" onchange="recalculateprice();reloadpr();" id="option-value-1251" value="1251" price="506.0000" price_prefix="" points="0" name="option[691]">
<label for="option-value-1251">900 xx - 506.00</label>
<br>
</div>

and this too

<div class="option" id="option-690">
<span class="required">*</span>
<b>Option:</b><br>
<select name="option[690]">
<option price="1156.0000" price_prefix="+" points="0" value="1249">value01
(+1156.00)
</option>
<option price="1156.0000" price_prefix="+" points="0" value="1248">value02
(+1156.00)
</option>
<option price="1156.0000" price_prefix="+" points="0" value="1247">value03
(+1156.00)
</option>
</select>
 </div>

And using this I can get data from both types (inputs + selects).

$('#product_options > div.option').each(function() {
 var Opt01 = ( $(this).find('option:selected').parent().parent().find('b').text() + $(this).find('option:selected').text() );
 var Opt02 = ( $(this).find('input:checked').parent().find('b').text() + $(this).find('input:checked').next().text() );

console.log(Opt01);
console.log(Opt02);
 });

But, I want to get Opt01 and Opt02 outside the .each() loop. How I can do this?

In a nutshell I just want to get checked/selected values, which located in different elements. — user4217275
– user4217275, Commented Nov 5, 2014 at 20:49

hoverbikes · Accepted Answer · 2014-11-05 06:28:51Z

3

Variables declared within functions can't be accessed outside of them. Just declare them outside of the loop:

var Opt01;
var Opt02;

$('#product_options > div.option').each(function() {
  Opt01 = ( $(this).find('option:selected').parent().parent().find('b').text() + $(this).find('option:selected').text() );
  Opt02 = ( $(this).find('input:checked').parent().find('b').text() + $(this).find('input:checked').next().text() );

  console.log(Opt01);
  console.log(Opt02);
 });

answered Nov 5, 2014 at 6:28

hoverbikes

4353 silver badges12 bronze badges

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

Comments

Ram · Accepted Answer · 2014-11-05 06:41:49Z

I want to get Opt01 and Opt02 outside the .each() loop

Since the variables are local in that context (by using var keyword), outside of the each callback the variables are undefined. You could define them outside of the each callback, e.g. var opt1, opt2;, but what will happen? In each iteration the values are overridden and the last values win. If the selector returns 1 element then each shouldn't be used in the first place.

You could define a function and pass the values to it.

$('#product_options > div.option').each(function() {
    var Opt1 = '...';
    var Opt2 = '...';
    doSomething(Opt1, Opt2);
});

Or use the map method and create an array of objects:

var options = $('#product_options > div.option').map(function() {
    var opt01 = '...';
    var opt02 = '...';
    return {
       opt1: opt01,
       opt2: opt02
    }
}).get();

Gilsha · Accepted Answer · 2014-11-05 08:12:38Z

1

Just declare the variable outside the each loop. Variables declared inside the function can be accessed only from inside. JsFiddle

var Opt01, Opt02; 
function find(){
    $('#product_options > div.option').each(function() {
      var option1 = ( $(this).find('option:selected').parent().parent().find('b').text() +              $(this).find('option:selected').text() );
      var option2 = ( $(this).find('input:checked').parent().find('b').text() +      $(this).find('input:checked').next().text() );
      if(option1){ 
          Opt01 = option1;  
          console.log("inside: "+Opt01);
      }
      if(option2){  
          Opt02 = option2; 
          console.log("inside: "+Opt02); 
      }              
  });
  console.log("outside: "+Opt01);
  console.log("outside: "+Opt02);
}

edited Nov 5, 2014 at 8:12

answered Nov 5, 2014 at 6:29

Gilsha

14.6k3 gold badges36 silver badges48 bronze badges

3 Comments

user4217275 Over a year ago

I'm trying this already, the problem is - if I trying to get Opt1 +Opt2 outside the loop I get first option only, second variable is empty.

Gilsha Over a year ago

You are getting second variable as empty because the last value assigned to Opt02 is empty. Updated the code. Try this.

user4217275 Over a year ago

Thanks. Forgot to say that I need to do some extra validation before .each(). May you take a look at jsfiddle.net/caLj2xbe As I think, if I put loop in if statement, then I can access to those variables from whole if {...}

Ashitosh birajdar · Accepted Answer · 2014-11-05 06:42:35Z

-1

It's very simple,
You have to declare your variables outside of your function as global.
But don't declare only,assign some value
Var opt1=0;

answered Nov 5, 2014 at 6:42

Ashitosh birajdar

4704 silver badges12 bronze badges

Comments

user4217275 · Accepted Answer · 2014-11-05 20:39:49Z

Thanks guys. I've added another validation rule before loop and code looks like this, so far. And it works fine:

if ($('#product_options div.option').length) {
  $('#product_options > div.option').each(function () {
//defining
OptionTitle = $(this).find('option:selected').parent().parent().find('b').text();
OptionValue = $(this).find('option:selected').text();
InputTitle = $(this).find('input:checked').parent().find('b').text();
InputValue = $(this).find('input:checked').next().text();
//
if (OptionTitle != '' && OptionValue != '') {
  Opt01 = (OptionTitle + OptionValue)
}
if (InputTitle != '' && InputValue != '') {
  Opt02 = (InputTitle + InputValue)
}
  });
  //get values outside the loop
console.log('Options detected');
if (typeof Opt01 === 'undefined') {
Opt01 = ''
}
if (typeof Opt02 === 'undefined') {
Opt02 = ''
}
  console.log('Opt01 = ' + Opt01);
  console.log('Opt02 = ' + Opt02);
} 
else {
console.log('Options are empty');
var Opt01 = '';
var Opt02 = '';
 console.log('Opt01 = ' + Opt01);
 console.log('Opt02 = ' + Opt02);
 }

Also, fiddle is here http://jsfiddle.net/caLj2xbe/

Collectives™ on Stack Overflow

Access variables outside the jQuery .each() loop

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related