如何使用 jquery 更改 2nd 和 6rd DIV 的 css 属性答案

【问题标题】：how to change css property of 2nd & 6rd DIV using jquery如何使用 jquery 更改 2nd 和 6rd DIV 的 css 属性
【发布时间】：2013-01-10 11:41:14
【问题描述】：

我需要以 3x2 格式的矩阵显示文章详细信息，例如图像、标题、作者、描述。

我使用以下class 来包装文章详细信息

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

这个类有一个margin-right: 25px，它将margin-right:25px;添加到每个div，它破坏了我的设计，容器只有750px的宽度。

我曾想过使用 jquery 分配 margin-right:0px; 来修复我的设计，但它不起作用。如何修复我的 jquery，以便我可以使用 jquery 将 margin-right: 0px; 分配给第 3 和第 6 DIV

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

以下是设计的示例 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-webform 并且我正在使用中继器控件来创建这个 div 并且我不想在 .cs 文件中执行它，因为使用 jQuery 在前端完成它更方便

Fiddle Example

【问题讨论】：

你可以使用 jquery 模板来重复元素。

标签： javascript jquery css webforms

【解决方案1】：

试试：

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

没有 div ... 因为您实际上告诉他设置内部 div 的边距 .. 而不是主要。

编辑：如果这种效果发生在每 3 个元素上，您可能会使用它：

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

【讨论】：

【解决方案2】：

改用 jQuery 的 :nth-child() 选择器。 http://api.jquery.com/nth-child-selector/

另请注意，在一个页面上使用多个相同的id 是无效的。如果您将 ids 更改为 classes 并相应地将 CSS 和 jQuery 选择器中的每个 # 更改为 .，那么您会很高兴。

【讨论】：

【解决方案3】：

解决方案：托管以使其与以下 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');
 });

【讨论】：

【解决方案4】：

在您的 css 文件中将 #article2x3-article-wrapperHP 更改为 .article2x3-article-wrapperHP。

将id="article2x3-article-wrapperHP" 更改为class="article2x3-article-wrapperHP" in your html file.

并用作脚本：

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

为我工作！

【讨论】：