jquery each in array returns items not in array

Question

I have a dropdown list of categories with id's and a name.

My jquery's purpose is to iterate over the category id's in the list, if it does not find the category id it will take that 'option' and prepend its text with 4 spaces. for some reason it is prepending all of them with raw text instead of the selected with the rendered html. thanks in advance if you can figure it out.

here is the jquery

    var parentCat = [ 1,2,3,4,5,6,7,8,9,10,11 ];
    $('#category option').each(function() {
        var cat = $(this).val();
        // console.log(cat);
        if($.inArray( cat, parentCat ) === -1) {
            var catName = $(this).text();
            console.log(catName);
            $(this).prepend(document.createTextNode("&nbsp;&nbsp;&nbsp;&nbsp;"));
        }

    });

here is the html dropdown select list

<select class="form-control input-md" id="category" name="category"
required="required">
    <option value="default">
        Please Select a Category
    </option>

    <option value="1">
        3D Printing
    </option>

    <option value="14">
        3D Printer Accessories
    </option>

    <option value="15">
        3D Printer Extruders
    </option>

    <option value="16">
        3D Printer Parts
    </option>

    <option value="17">
        3D Printers
    </option>

    <option value="18">
        3D Printing Tests
    </option>

    <option value="2">
        Art
    </option>

    <option value="19">
        2D Art
    </option>

    <option value="20">
        Art Tools
    </option>

    <option value="21">
        Coins &amp; Badges
    </option>

    <option value="22">
        Interactive Art
    </option>

    <option value="23">
        Math Art
    </option>

    <option value="24">
        Scans &amp; Replicas
    </option>

    <option value="25">
        Sculptures
    </option>

    <option value="26">
        Signs &amp; Logos
    </option>

    <option value="3">
        Fashion
    </option>

    <option value="27">
        Accessories
    </option>

    <option value="28">
        Bracelets
    </option>

    <option value="29">
        Costume
    </option>

    <option value="30">
        Earrings
    </option>

    <option value="31">
        Glasses
    </option>

    <option value="32">
        Jewelry
    </option>

    <option value="33">
        Keychains
    </option>

    <option value="34">
        Rings
    </option>

    <option value="4">
        Gadgets
    </option>

    <option value="35">
        Audio
    </option>

    <option value="36">
        Camera
    </option>

    <option value="37">
        Computer
    </option>

    <option value="38">
        Mobile Phone
    </option>

    <option value="39">
        Tablet
    </option>

    <option value="40">
        Video Games
    </option>

    <option value="5">
        Hobby
    </option>

    <option value="41">
        Automotive
    </option>

    <option value="42">
        DIY
    </option>

    <option value="43">
        Electronics
    </option>

    <option value="44">
        Music
    </option>

    <option value="45">
        R/C Vehicles
    </option>

    <option value="46">
        Robotics
    </option>

    <option value="47">
        Sport &amp; Outdoors
    </option>

    <option value="6">
        Household
    </option>

    <option value="48">
        Bathroom
    </option>

    <option value="49">
        Containers
    </option>

    <option value="50">
        Decor
    </option>

    <option value="51">
        Household Supplies
    </option>

    <option value="52">
        Kitchen &amp; Dining
    </option>

    <option value="53">
        Office
    </option>

    <option value="54">
        Organization
    </option>

    <option value="55">
        Outdoor &amp; Garden
    </option>

    <option value="56">
        Pets
    </option>

    <option value="57">
        Replacement Parts
    </option>

    <option value="7">
        Learning
    </option>

    <option value="58">
        Biology
    </option>

    <option value="59">
        Engineering
    </option>

    <option value="60">
        Math
    </option>

    <option value="61">
        Physics &amp; Astronomy
    </option>

    <option value="8">
        Models
    </option>

    <option value="62">
        Animals
    </option>

    <option value="63">
        Buildings &amp; Structures
    </option>

    <option value="64">
        Creatures
    </option>

    <option value="65">
        Food &amp; Drink
    </option>

    <option value="66">
        Model Furniture
    </option>

    <option value="67">
        Model Robots
    </option>

    <option value="68">
        People
    </option>

    <option value="69">
        Props
    </option>

    <option value="70">
        Vehicles
    </option>

    <option value="9">
        Tools
    </option>

    <option value="71">
        Hand Tools
    </option>

    <option value="72">
        Machine Tools
    </option>

    <option value="73">
        Parts
    </option>

    <option value="74">
        Tool Holders &amp; Boxes
    </option>

    <option value="10">
        Toys &amp; Games
    </option>

    <option value="75">
        Chess
    </option>

    <option value="76">
        Construction Toys
    </option>

    <option value="77">
        Dice
    </option>

    <option value="78">
        Games
    </option>

    <option value="79">
        Mechanical Toys
    </option>

    <option value="80">
        Playsets
    </option>

    <option value="81">
        Puzzles
    </option>

    <option value="82">
        Toy &amp; Game Accessories
    </option>

    <option value="11">
        Other
    </option>
</select>

Trying to get it to look like this http://snag.gy/IplgB.jpg

Working code

var parentCat = [ 1,2,3,4,5,6,7,8,9,10,11 ];
$('#category option').each(function() {
var cat = parseInt($(this).val());
console.log(cat);
if($.inArray( cat, parentCat ) === -1 && !isNaN(cat)) {
    $(this).prepend('&nbsp;&nbsp;&nbsp;&nbsp;')
}

});

I'm guessing the string you got from the elements value never matches the numbers in your array ? — adeneo
– adeneo, Commented Mar 9, 2014 at 20:46
var cat = $(this).val(); console.log(cat); returns all option ID values which was what I was looking to make sure it did during testing. So that part works, and has since been commented out. Now i just need to modify only the options who's ID's are NOT in the array so i put the === -1 in the next function. — Jesse Szypulski
– Jesse Szypulski, Commented Mar 9, 2014 at 20:49

Magesh · Accepted Answer · 2014-03-09 20:58:01Z

1

Try replacing the following line

  var cat = $(this).val();

with

 var cat = parseInt($(this).val());

the problem is with the comparison.. $(this).val() returns a string that is being compared with an array of numbers..

answered Mar 9, 2014 at 20:58

Magesh

4843 silver badges6 bronze badges

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

1 Comment

Jesse Szypulski Over a year ago

awesome, had to check for isNaN too for the default option to not be affected. Have posted working code.

Collectives™ on Stack Overflow

jquery each in array returns items not in array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related