Доступ к переменным за пределами цикла jQuery .each()

Question

У меня есть немного сложная структура html. я разобрать его, чтобы получить этот материал:

Option1: value 
Option2: value 

от этого, как 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> 

и это тоже

<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> 

И с помощью этого я могу получить данные из обоих типов (входы + выбирает).

$('#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); 
}); 

Но, я хочу получить Opt01 и Opt02 вне петли .each(). Как я могу это сделать?

Answer 1

Переменные, объявленные в пределах функций, не могут быть доступны за пределами них. Просто объявите их вне цикла:

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); 
}); 

Answer 2

Просто объявите переменную за пределами каждого цикла. Переменные, объявленные внутри функции, могут быть доступны только изнутри. 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); 
} 

Answer 3

Я хочу, чтобы получить OPT01 и Opt02 вне .each() петли

Поскольку переменные являются локальными в этом контексте (с помощью Var ключевое слово), вне each Обратный вызов переменных: undefined. Вы можете определить их вне каждого обратного вызова, например. var opt1, opt2;, но что будет? На каждой итерации значения переопределяются, а последние значения выигрывают. Если селектор возвращает 1 элемент, то в первую очередь не следует использовать each.

Вы можете определить функцию и передать ей значения.

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

Или использовать метод map и создать массив объектов:

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

Answer 4

Это очень просто,
Вы должны объявить переменные вне вашей функции как глобальные.
Но не объявляйте только, присвойте некоторое значение
Var opt1 = 0;

Answer 5

Спасибо, ребята. Я добавил еще одно правило проверки перед циклом, и код выглядит так, пока. И это прекрасно работает:

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); 
} 

Кроме того, скрипку здесь http://jsfiddle.net/caLj2xbe/