Question

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

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

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

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

我想过使用jquery来指定margin-right:0px;来修复我的设计，但它无法正常工作。我如何修复我的jquery，以便我可以将margin-right: 0px;分配给3rd＆amp;使用jquery的第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＆amp;我正在使用转发器控制来创建这个div＆amp;我不想在.cs文件中这样做，因为使用jQuery在前端完成它更方便

Fiddle Example

Answer 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");

Answer 2

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

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

Answer 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');
 });

Answer 4

在您的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");
});

为我工作！

如何改变2nd＆amp;的css属性6rd DIV使用jquery

4 个答案: