how to change css property of 2nd & 6rd DIV using jquery


Tags: javascript,jquery,css,webforms

Problem :

I need to display article details like Image, Title, Author, Desc in a matrix of 3x2 format.

I use following class to wrap article details

#article2x3-article-wrapperHP
{
float:left;
width:233px;
height:340px;
background-color:#ccc;
vertical-align:middle;
margin-right:25px;
}

This class has a margin-right: 25px which adds margin-right:25px; to every div and it breaks my design and the container has width of 750px only.

I thought of using jquery to assign margin-right:0px; to fix my design but it is not working. How can i fix my jquery so that i can assign margin-right: 0px; to 3rd & 6th DIV using jquery

 $(function () {
     $(".article2x3-outer-wrapperHP div:eq(3)").css("margin-right", "0px");
    $(".article2x3-outer-wrapperHP div:eq(6)").css("margin-right", "0px");
 });

Below is the sample HTML code for design

<div id="article2x3-outer-wrapperHP">

        <div id="article2x3-HPTitle">
            <span id="MainContent_LatestTopSixArticles_lblArticle2x4Title">Current Articles</span>
        </div>

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div>      

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div>  

</div>

I actual web page is asp.net-webform & i am using repeater control to create this div & i dont want to do it in .cs file to as it is more convenient a get it done in front end using jQuery

Fiddle Example



Solution :

Solution: Managed To make it work with following jQuery

 $(function () {
   //  $(".article2x3-article-wrapperHP:eq(3)").css("margin-right", "0px");
     $('#article2x3-article-wrapperHP:nth-child(3n+1)').css('margin-right', '0px');
     $('#article2x3-article-wrapperHP:nth-child(6n+1)').css('margin-right', '0px');
 });

    CSS Howto..

    How to make my dynamic table scrollable when mouse clicked?

    How to force input type text within span width

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    CSS: how to set the width of form control so they all have the same width?

    How to create css shadow effect [duplicate]

    How to prevent document scrolling but allow scrolling inside div elements on websites for iOS and Android?

    How to make a split screen video with full height?

    How can I get to see the full image in the background?

    how to have a div with two images in any of 9 possible positions

    My sidebar is going over the footer. How can I sort this out?

    Updating CSS via plain JavaScript… how do I update if the property uses vendor prefixes?

    How to position background image in bottom right corner? (CSS)

    How to select all a pseudo-classes in CSS?

    How to indent text exactly one character width

    How can I prevent my layout from disrupting when a Javascript function runs?

    How to center post title in blogger. (tried applying CSS)

    How to turn this menu into a MultiLevel one?

    How to shrink the width size hyperlink?

    How can align css colums vertcally to the bottom?

    how do you center columns/rows

    CSS selector: How to select element sibling AND element itself?

    Pure CSS: Show image2 above/over/on top image1 on hover

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    How to set CSS class to Button control using Session value in design page

    How to make a scroll customization for mobile application?

    How do I assign an external CSS file to a javascript-constructed SVG object?

    How to Move Bing Maps Menu to the Right side of Screen

    How to get ratio of scale image, when it's autoscaled by background-cover?

    how to hide the border of tag (when the img load error)

    How can I change the css of this when I click on anything but this?