Строка Jquery - переменная, основанная на выбранных кнопках и их значениях

Question

У меня есть следующий скрипт:

$(function(){
    //all hover and click logic for buttons
    $(".fg-button:not(.ui-state-disabled)")
    .hover(
        function(){ 
            $(this).addClass("ui-state-hover"); 
        },
        function(){ 
            $(this).removeClass("ui-state-hover"); 
        }
    )
    .mousedown(function(){
        $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
        if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
        else {$(this).addClass("ui-state-active");} 
    })
    .mouseup(function(){
        if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
            $(this).removeClass("ui-state-active");
        }
    });
});

и html:

<div class="fg-buttonset fg-buttonset-multi">
<button class="fg-button ui-state-default">Small</button>
<button class="fg-button ui-state-default">Medium</button>
<button class="fg-button ui-state-default">Large</button>
</div>

Это включает и выключает кнопки, мне нужно выстроить переменный размер переменной в формате:

напр.Small | Medium

на основе сделанных выборок (пример выше малых и средних выбранных.).

Спасибо

Answer 1

Это даст вам переменную размера, содержащую "|"строка с разделителями для каждого набора кнопок.

$(".fg-buttonset").each(function() {
    var size = $(this).find(".ui-state-active").map(function() {
        return $(this).text();
    }).join("|");   
});