How to apply css style on the list of div by defending on the class name using javascript


Tags: javascript,jquery,css

Problem :

I got list of li tag that have 2 kinds of class name coding and design. The result that i want is if the li is design the post-link is display block and the site-link is display none while coding class name will have opposite effect. I store the li class into array then the condition will loop to find out what li tag have class name of design and coding. The result is the condition only read the last element of the array. Can you help me on this... sorry not good in asking question in english.

HTML

<li class="Design">
    <a class="post-link"></a>
    <a class="site-link"></a>
</li>
<li class="Design">
    <a class="post-link"></a>
    <a class="site-link"></a>
</li>
<li class="Coding">
    <a class="post-link"></a>
    <a class="site-link"></a>
</li>

var workArray = [];
var $work = jQuery('.slide-container li');
var $workClass = $work.attr('class');

$work.each(function(){
        workArray.push($workClass);
        for(i = 0; i < workArray.length; i++){
            if(jQuery(this).hasClass('Design')){
                jQuery('.post-link').css('display','block');
            }else{  
                jQuery('.post-link').css('display','none');     
            }
        }
    });


Solution :

css:

.Design .site-link {
   display: none;
}

.Coding .post-link {
   display: none;
}

and let the browser does the array/traverse push/pop by itself ;)


    CSS Howto..

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to locate which css include is used for an element

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    How to use CSS timing functions to animate an arc?

    How to get rid of this whitespace in internet explorer?

    How to center data table header and data using in bootstrap w/o using CSS?

    How to stop CSS Code Display:none for specific id or class?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to create a cross with pure css [duplicate]

    How do you align left / right a div without using float?

    CSS: How to vertically align elements inside div with display: table-cell

    How do I correct overlapping spacing error in CSS when it wraps text?

    How can I load css file in Meteor for just one page?

    How to locate a list of webelement using Css selector in C#

    How to CSS two vertical cylinders

    jason lewis basset did not show icons well in laravel 4

    How to change css rules of external stylesheet [duplicate]

    How does Wired magazine achieve this thick underline link effect?

    How to remove mystery indents in a form?

    How to Automatically adjust width in CSS so horizontal scrollbars would adjust automatically without taking so much space?

    How to change background [closed]

    How to add custom css/js to just one page in WordPress?

    How can I best port a frame-based “HTML of yesteryear” application to modern CSS(3)? [closed]

    How can I add some css to center certain divs if they are using the same css style? [duplicate]

    Only show limiited div's depending on browser width

    CSS: Is there a limit on how many classes an HTML element can have?

    How to add a z-index to separate image from div border

    How to apply CSS style which will be ignored for tfoot or last TR

    how to make menu on mouse hover in CSS

    How to make UL Tabs with only HTML CSS