需要帮助在JQuery中使用嵌套元素

时间:2012-12-14 08:12:07

标签: javascript jquery

我正在开发一个脚本,用于自动截断特定大小的块引用,并为它们添加“Read more”链接。问题在于块引用是嵌套在彼此内部的,这使事情变得有点棘手。我已经让脚本适用于单级块引用,但是当面对嵌套的块引用时,它最终会擦除比我想要的更多的信息。

我希望它做的是:

  1. 检查父元素的子元素以查找父元素的第一个blockquote子元素
  2. 检查此blockquote是否在其第一段中包含图像。如果是,则克隆此blockquote的第一个和第二个段落。如果没有,只需克隆第一段。
  3. 检查并查看此blockquote是否包含任何其他blockquotes。如果是这样,请克隆其所有后代块引号。
  4. 将父块blockquote的克隆段落和所有克隆的blockquote后代(如果适用)合并为一个变量(我们称之为cloneCon)。
  5. 将父块引用的html替换为变量cloneCon的内容。
  6. 将更多链接附加到父块引用。
  7. 这是我现在正在使用的代码:

    var post = $('#post_two_ifr').contents().find('#tinymce');
    var markup = $('<body>').append(post.html()); // temporary container
    
    markup.children('blockquote:first').each(function() {
        var original = $(this).prev('p').children('a').attr('href'); 
        var viz = '';
        if ($(this).children('p:first').find('img').length > 0) {
            var viz = $(this).children('p:lt(2)').clone();
        } else {
            var viz = $(this).children('p:first').clone();
        }
    
         $(this).html(viz).append('<p><a href="'+original+'" class="tumblr_blog">Read More</a></p>');
    });
    
    post.html(markup.html());
    

    markup.children每个函数内的所有内容都是我遇到的问题。以下是我正在使用的HTMl的样子:

    <p><a class="tumblr_blog" href="http://example.org">user#1</a>:</p>
    <blockquote>
        <p><a class="tumblr_blog" href="http://example.org">user#2</a>:</p>
        <blockquote>
            <div>
                <p><img alt="image" height="340" src="" /></p>
                <p>consectetur adipiscing elit. Nullam sit amet velit nibh. Aliquam leo libero, pellentesque eget fringilla eget, pretium eu purus. Pellentesque a neque at arcu fermentum volutpat. In et dolor ligula, et aliquam odio. Sed sagittis fermentum massa, vel tempus neque adipiscing nec. Nunc posuere commodo orci, ac imperdiet odio malesuada eget. Aliquam pharetra pretium faucibus. Sed erat urna, laoreet quis ornare quis, fermentum quis lacus. Vestibulum a interdum nisi. Proin hendrerit orci non neque dignissim feugiat. Vivamus pretium pretium nunc, ut dapibus augue ullamcorper at. Suspendisse ac est vel velit vehicula accumsan quis vel turpis. Pellentesque eros velit, ullamcorper ac tempus sit amet, placerat quis magna. Sed ipsum nibh, convallis at tempor sit amet, vehicula vitae mauris. Aenean rutrum, lorem vitae suscipit tempor, libero lorem porta diam, a semper nulla erat in mi. Morbi leo lacus, placerat id hendrerit vitae, semper id tellus.</p>
                <p><a class="tumblr_blog" href="http://example.org">Read More</a></p>
            </div>
        </blockquote>
        <p>Lorem Ipsum Dolor.</p>
        <p>Consectetur Adipsing Elit.</p>
        <p>I used to wonder what friendship could be.</p>
    </blockquote>
    

    感谢您的帮助!

    编辑:我明白了。我通过简单地告诉脚本完全克隆父块引用来简化我的执行,然后从父块引用中删除所需数量的子段落。

1 个答案:

答案 0 :(得分:0)

我明白了。我通过告诉脚本完整地克隆父块引用来简化我的执行,然后从父块引用中删除所需数量的子段落。这样我就不需要检查是否有子块引用;它们是自动克隆的。