using class names to create array for a for each statement

Question

I have a set of checkboxes with span elements as their titles. I want the text in the span to wrap with a url once the checkbox is checked. However, I do have the code down for selecting the span class names. In order for my code to work I have my checkbox id the same name as my span. This does work if I set the array myself but for some reason I cannot get my array to work when it is created with the script. Here's the code

HTML:

<div id="product_list" style="float:left; clear:right;">
<input type="checkbox" id="p01" name="system[]" value="p01" form="compare">
<span style="margin-left:20px;" class="p01">product one</span>
<br/>

<input type="checkbox" id="p02" name="system[]" value="p02" form="compare">
<span style="margin-left:20px;" class="p02">product two</span>
<br/>

<input type="checkbox" id="p04" name="system[]" value="p04" form="compare">
<span style="margin-left:20px;" class="p04">product three</span>
<br/>

<input type="checkbox" id="p05" name="system[]" value="p05" form="compare">
<span style="margin-left:20px;" class="p02">product four</span>
<br/>

</div>

JQUERY:

var arr = [];
arr = $('#product_list span').not('.hidden').map(function(i,e) {
return $(e).attr('class');
}).get().join(', ');

alert(arr);

    //arr = ["p01", "p02", "p03", "p04"]; works but not the above.

jQuery.each(arr , function(index, value){

$("#"+ value).click(function(){
// alert("clicked");
if ($(this).attr("checked") == "checked"){
$('.'+value).wrap('<a href="#" id="comparelink" target="_blank"></a>'); $('a').link('href', '#');    
}

else {
$('.'+value).unwrap('a');

}

});

});

example

Alexander · Accepted Answer · 2013-01-02 21:46:31Z

1

Right now, your code is setting arr to a string as follows

"p01, p02, p04, p05"

Simply, remove the String#join to generate the array you want.

var arr = $('#product_list span').not('.hidden').map(function(i, e) {
    return $(e).attr('class');
}).get();

Furthermore, jQuery has no method .link(). I suppose you meant to use .attr().

Use

$('a').attr('href', '#');

instead of

$('a').link('href', '#');

I applied some modifications to your code.

Usage of change event handler.
Cache of selector, such as $span and $input.
Usage of .prop() instead of .attr().
Usage of .prev() to get the input elements since all of them happen to be just before your span elements.
Change from id attribute to class attribute since ID are meant to be unique over all the DOM.

$('#product_list span').not('.hidden').each(function() {
    var $span = $(this), $input = $span.prev();
    $input.change(function() {
        if ($input.prop("checked")) {
            $span.wrap($('<a/>', {
                "href": "#",
                "class": "comparelink",
                "target": "_blank"
            }));
        } else {
            $span.unwrap('a');
        }
    });
});

See it here.

edited Jan 2, 2013 at 21:46

answered Jan 2, 2013 at 21:27

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

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

5 Comments

Far Over a year ago

thank you Alexander and @charlietfl. Worked awesome. Also thank you pointing out the link too

charlietfl Over a year ago

$('a').attr('href', '#'); will change every <a> in page... no idea what is wanted

Alexander Over a year ago

@charlietfl, neither me. I suppose was meant to be completed afterwards

Alexander Over a year ago

@Far, if you are open to suggestions, feel free to see my updated answer

Far Over a year ago

thank you, it was included just to show what the intention of making the array was for. I really wasn't looking for a fix on the link thinking I didn't need to but you proved me wrong :-) Thank you again very much for helping me out on that. I'll read up more on the documentation of the prop and prev

charlietfl · Accepted Answer · 2013-01-02 21:37:06Z

1

Just remove the join().

arr = $('#product_list span').not('.hidden').map(function(i,e) {
return $(e).attr('class');
}).get();

get() unwraps the array from jQuery object

You could do this without using array, rather using simple traverse.

var $checkboxes = $('#product_list span').not('.hidden').prev();
    $checkboxes.click(function(){
         if( this.checked){
              /* "A" tag has problems...can't duplicate ID's using class and no idea what href you want*/              
              $(this).next('span').wrap('<a href="#" class="comparelink" target="_blank"></a>'); 
         }else{
              $(this).next().find('span').unwrap()
         }
    });

edited Jan 2, 2013 at 21:37

answered Jan 2, 2013 at 21:28

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Denys Séguret · Accepted Answer · 2013-01-02 21:21:52Z

0

You're not really building an array but a string ("p01, p02, p03, p04").

Replace

var arr = [];
arr = $('#product_list span').not('.hidden').map(function(i,e) {
return $(e).attr('class');
}).get().join(', ');

with

var arr = $('#product_list span').not('.hidden').map(function(i,e) {
    return $(e).attr('class');
});

answered Jan 2, 2013 at 21:21

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

1 Comment

Far Over a year ago

Thank you, I almost figured that, lol but when I run this script it gives me [object Object]

Syon · Accepted Answer · 2013-01-02 21:35:40Z

This is more of an alternative answer because it doesn't really address the array issue, but why do you need to use an array? Would this work for your code, it grabs all the input elements with a name of system[] and assigns the click event:

$('input[name="system[]"]').on('click', function() {
    var spanClass = $(this).attr('id');
    if ($(this).attr("checked") == "checked") {
        $('.' + spanClass).wrap('<a href="#" id="comparelink" target="_blank"></a>');
    }
    else {
        $('.' + spanClass).unwrap('a');
    }
});

You could also give those inputs a shared class like 'chkLink' and use that in place. Just seems like you're doing something really difficult for something that could be simplified... either that or I don't grasp the full intent of your application.

Collectives™ on Stack Overflow

using class names to create array for a for each statement

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related