Question

我有一个问题，我已经坚持了一段时间：我正在使用tumblr并尝试翻转img和“文本帖子”的文本。所以目前我正在手动完成，在.text p：first-child的第8个eq之前选择要插入的第8个.text img。

因此，在照片/ photoset帖子中，我可以指向字幕并使它们出现在图像之后，但在文本帖子中，所有内容都包含在{body}中，因此需要选择特定帖子的图像eq（8）在特定帖子的文本eq（8）

之前进行匹配和调用

$(".text img").eq(8).insertBefore($('.text p:first-child').eq(8));
$(".text img").eq(7).insertBefore($('.text p:first-child').eq(7));
$(".text img").eq(6).insertBefore($('.text p:first-child').eq(6)); 
$(".text img").eq(5).insertBefore($('.text p:first-child').eq(5)); 
$(".text img").eq(4).insertBefore($('.text p:first-child').eq(4)); 
$(".text img").eq(3).insertBefore($('.text p:first-child').eq(3));
$(".text img").eq(2).insertBefore($('.text p:first-child').eq(2));
$(".text img").eq(1).insertBefore($('.text p:first-child').eq(1));
$(".text img").eq(0).insertBefore($('.text p:first-child').eq(0));

使用文本帖子发布图片的原因是为了解决tumblr photoset帖子上的10 imgs限制。

有没有一种方法可以对其进行编码，以便每次发布新的文本帖子时都会选择并相应插入？ insertbefore是这样的，在我的索引页面中，将显示第一个子图像和第一个子文本。

我知道也许选择eq不是要走的路......

（我已将html和css代码的相关部分放在这里，如果我还缺什么请告诉我!!）我的Html代码：

<div class="grid">
<div class ="autopagerize_page_element">
<div id="list">
        {block:Posts inlineMediaWidth="1280"} 


            {block:Text}

                {block:IndexPage}
                <div class="grid-sizer grid-item">
                    <div class="text">
                    <a href="{Permalink}">
                    {body}
                    </a>
                    </div>
                </div>
                {/block:IndexPage}

            {block:PermalinkPage}
                <div class="postperm">
                    <div class="perm-right text1">
                    {body}
                    </div>
                    <div class="perm-left text2">
                        <div class="captionPerm">{body}</div>
                    </div>
                </div>
            {/block:PermalinkPage}

            {/block:Text}


         {block:Photo}
            {block:IndexPage}
                <div class="grid-sizer grid-item photo">
                <a class="photos" href="{Permalink}">
                    <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
                </a>
                {block:Caption}
                    <div class="spacePhotos"></div>
                    <div class="caption">

                    {Caption}</div>
                {/block:Caption}
                </div>
            {/block:IndexPage}

        {block:PermalinkPage}
            <div class="postperm">
                <div class="perm-right">
                    <img alt="{PhotoAlt}" src="{PhotoURL-HighRes}">
                </div>
                <div class="perm-left">
                 {block:Caption}
                    <div class="captionPerm">{Caption}</div>
                 {/block:Caption}
                </div>
            </div>
        {/block:PermalinkPage}
        {/block:Photo}
<!------------- PANORAMA* NOT CONFIGURED -------------------> 
            {block:Panorama}
                <div class="post panorama">
                    {LinkOpenTag}
                        <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                    {LinkCloseTag}
                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Panorama}


        {block:Photoset}
            {block:IndexPage}
                <div class="grid-sizer grid-item photoset">
                    <a class="photos" href="{Permalink}">
                        {block:Photos}
                        <img alt="" src="{PhotoURL-HighRes}">
                        {/block:Photos}
                    </a>
                    {block:Caption}
                    <div class="spacePhotos"></div>
                    <div class="caption">

                        {Caption}
                    </div>
                     {/block:Caption}

                </div>
            {/block:IndexPage}

            {block:PermalinkPage}
                <div class="postperm">
                    <div class="perm-right">
                        {block:Photos}
                        <img alt="" src="{PhotoURL-HighRes}">
                        {/block:Photos}
                    </div>
                    <div class="perm-left">
                       {block:Caption}
                       <div class="captionPerm">{Caption}</div>
                       {/block:Caption}
                    </div>
                </div>
            {/block:PermalinkPage}
        {/block:Photoset}

<!----------------- THE REST! *NOT CONFIGURED ------------------>        
            {block:Quote}
                <div class="post quote">
                    "{Quote}"

                    {block:Source}
                        <div class="source">{Source}</div>
                    {/block:Source}
                </div>
            {/block:Quote}{block:Link}
                <div class="post link">
                    <a href="{URL}" class="link" {Target}>{Name}</a>

                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
                </div>
            {/block:Link}{block:Chat}
                <div class="post chat">
                    {block:Title}
                        <h3><a href="{Permalink}">{Title}</a></h3>
                    {/block:Title}

                    <ul class="chat">
                        {block:Lines}
                            <li class="{Alt} user_{UserNumber}">
                                {block:Label}
                                    <span class="label">{Label}</span>
                                {/block:Label}{Line}
                            </li>
                        {/block:Lines}
                    </ul>
                </div>
            {/block:Chat}


            {block:Video}
                <div class="post video">
                    {Video-500}{block:Caption}
                         <div class="spacePhotos"></div>
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Video}{block:Audio}
                <div class="post audio">
                    {AudioEmbed}{block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Audio}


             {/block:Posts}
        </div>
   </div>
 </div>

我的CSS代码：

.index-page .grid-item .caption p,
    .index-page .grid-item .text p {
        margin:auto;
    }
    .index-page .grid-item .caption p {
        display: none;
        padding-top:15px;
        line-height:125%;
        color:#fff;
        text-align:center;
    }
    .index-page .grid-item .caption p:first-child{
        display:block;
    }
    .index-page .photos img{
        display: none;
    }
    .index-page .photos img:first-child{
        display: block;
    }

    .index-page .text a {
        text-decoration:none;
    }


    .index-page .text p {
        display:none;
       padding-top:15px;
        line-height:125%;
        color:#fff;
        text-align:center;
       max-width:90%;
    }
    .index-page .text p:first-of-type{
        display: block;
    }

    .read_more { 
        display: none; 
    }

tumblr的jquery eq选择器循环

0 个答案: