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

Question

我需要以 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，以便我可以 margin-right: 0px;使用 jquery 分配给第 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 在前端完成它更方便

小提琴示例

score 1 · Accepted Answer

尝试：

$(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");

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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



And use as script this:

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

为我工作！

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

4 回答 4

Related

Reference