CODEWITHSUNDEEP
javascriptjquery
Chuck
Chuck

Reputation: 375

Add class to element that has the id from array

I have an array that contains values from a cookie, if one of those values matches the id of an h2 I want to add the class testing. This is the latest route I have attempted. Thanks

jQuery.each(arr, function(index, value) {
    $("h2.#" + value).addClass("testing");
});

Full code:

<script type="text/javascript">
$(document).ready(function(){
    var cookieName = $("body").attr("id");
    storedCookieName = $.cookie(cookieName);

    if (storedCookieName != null) {

        var cookieValues = storedCookieName;
        var arr = storedCookieName.split(',');
        alert( "the cookie values for this page are :" + arr);

        jQuery.each(arr, function(index, value) {
            $("#" + value).addClass("testing");
        });


    } else {
        var cookieValues = '';
        alert("I don't have a cookie for this page");
};

  //add id's to each drop down box trigger
$('h2.contentTrigger').attr('id', function(i, value) {
    return "dropDownTrigger" + (i+1);
});

//Hide (Collapse) the toggle containers on load
$(".toggle_content_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.contentTrigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("fast");
    return false; //Prevent the browser jump to the link anchor
});


$("h2.contentTrigger").click(function(){

      //get class of clicked item to check if dropdown is active when clicked
    var triggerClass = $(this).attr("class");
      //get id of clicked dropdown
    var targetLink = $(this).attr("id");

    if ((triggerClass == 'contentTrigger noprint active') || (triggerClass == 'contentTrigger print active')) {
        cookieValues+=($(this).attr("id")+",");
        $.cookie(cookieName, cookieValues, { path: '/', expires: 10 });
        //alert("adding value" + cookieValues);    
    }else{
        cookieValues = cookieValues.replace(targetLink+",", "");
        $.cookie(cookieName, cookieValues, { path: '/', expires: 10 });    
        //alert("new value" + cookieValues);    
    };
});

});//end:$(document).ready
</script>

</head>
<body id="<CFOUTPUT>#SMPPageVariables.PageMetaKeywords#</CFOUTPUT>">
<div id="container">
<CFINCLUDE TEMPLATE="../libraryelements/AR_TwoDeepLeft_Navigation.element">
<div id="content">
<CFMODULE TEMPLATE="../../modules/mod_page_item_area_display.cfm" AreaID="108" PageID="#SMPPageVariables.PageID#">
<CFMODULE TEMPLATE="../../modules/mod_page_item_area_display.cfm" AreaID="109" PageID="#SMPPageVariables.PageID#">
<!--Sample of output    
<div class="tab">
    <h2 class="contentTrigger noprint"><a>What Is Important To Know</a></h2>
    <div class="toggle_content_container noprint">
        <div class="block">
            <h4>Info</h4>
            <p>Info:</p>
            <ul>
                <li>Words</li>
                <li>Words</li>
            </ul>
            <h4>Heading</h4>
            <p>Paragraph</p>
            <p>Paragraph</p>
        </div>
    </div>
</div>
-->    
</div>
<div class="hidden"><CFMODULE TEMPLATE="../../modules/mod_page_item_area_display.cfm" AreaID="110" PageID="#SMPPageVariables.PageID#"></div>
</div>
</body>
</html>

Upvotes: 1

Views: 2086

Answers (3)

Greg B
Greg B

Reputation: 14888

Remove the . from your selector; "h2#" + value instead of "h2.#" + value

so the code looks like

jQuery.each(arr, function(index, value) {
    $("h2#" + value).addClass("testing");
});

Upvotes: 1

Exelian
Exelian

Reputation: 5888

You have an incorrect . in there and the h2 won't be needed when using ids. You want this:

jQuery.each(arr, function(index, value) {
    $("#" + value).addClass("testing");
});

Upvotes: 4

user1012851
user1012851

Reputation: 

jQuery.each(arr, function(index, value) {
    $("h2#" + value).addClass("testing");
});

It look like you had a dot before sharp character that shouldn't be there

Upvotes: 1

Related Questions