Jesse Szypulski
Jesse Szypulski

Reputation: 118

jquery each in array returns items not in array

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

    }); 

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

});

Upvotes: 0

Views: 52

Answers (1)

Magesh
Magesh

Reputation: 484

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

Upvotes: 1

Related Questions