如何使用jquery更改第二和第六个DIV的css属性

我需要以3x2格式的矩阵显示文章详细信息，如图像，标题，作者，描述。如何使用jquery更改第二和第六个DIV的css属性

我用以下class包文章详细介绍

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

这个类有一个保证金权：25px的这增加margin-right:25px;到每一个DIV和它打破了我的设计和容器具有的唯一750px宽度。

我想使用jquery来分配margin-right:0px;来修复我的设计，但它不工作。如何解决我的jQuery的，这样我可以使用jquery

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

下面指定margin-right: 0px;至3 & 6 DIV被设计的HTML代码示例

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

我实际网页asp.net- Web窗体&我使用Repeater控件创建这个div &我不想做，在cs文件到，因为它是更方便把它在前端使用jQuery

完成

来源

2013-01-10 Learning

U可以使用jQuery的模板来重复元素。 – Sandeep

解决方案：设法使之在你的CSS文件下面的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'); 
});

来源

2013-01-10 11:54:35 Learning

尝试：

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

无格...因为你竟然告诉他，设置内部DIV的保证金..不是主要的。

编辑：您可以使用，如果每个3TH元素上会出现这样的效果：

$('.article2x3-article-wrapperHP:nth-child(3n)').css("margin-right", "0px");

来源

2013-01-10 11:44:28

使用jQuery的:nth-child()选择来代替。 http://api.jquery.com/nth-child-selector/

另请注意，在页面上使用多个相同的id无效。如果您将id s更改为class es，并相应地将您的CSS和jQuery选择器中的每个#更改为.，那么您将很好。

来源

2013-01-10 11:45:48 Mooseman

变化#article2x3-article-wrapperHP到.article2x3-article-wrapperHP工作。

更改id="article2x3-article-wrapperHP"到class =“article2x3-article-wrapperHP”在您的html文件中。

 而作为这个脚本使用：

$(function() { 
    $(".article2x3-article-wrapperHP:nth-child(4)").css("marginRight", "0px"); 
    $(".article2x3-article-wrapperHP:nth-child(7)").css("marginRight", "0px"); 
});

为我工作！

来源

2013-01-10 11:54:54 Enthusiasmus

如何使用jquery更改第二和第六个DIV的css属性

回答

相关问题