将文本从span复制到其他span

时间:2013-09-17 10:18:34

标签: javascript jquery

我正试图将一个跨度的内容复制到锚点击甚至另一个跨度。

如果我删除包装器标题div的示例jsFiddle

,它可以正常工作

当我将它们包装在div中时它不再起作用我尝试了不同的东西到目前为止我无法找到正确的属性或功能来使用。

这个需要修复jsFiddle

<div style="float:left; width=800px;" id="video_container">
    <iframe width="438" height="250" src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=0" frameborder="0" allowfullscreen="1"></iframe>
</div>
<span class="active-video-title">Title</span>

<span class="active-video-date">Date</span>

<div class="row">
    <br> <a href="oDAw7vW7H0c" class="play-youtube">
            <span class="youtube-thumbnail">Thumnnail 1</span>
       <div class="title-wrapper">
            <span class="title">Title of the Video 1</span>
             <span class="date">Date  1</span>
        </div>
        </a>

    <br> <a href="5F-Wge37_ys" class="play-youtube">
            <span class="youtube-thumbnail">Thumnnail 2</span>
        <div class="title-wrapper">
            <span class="title">Title of the Video 2</span>
             <span class="date">Date  2</span>
            </div>
        </a>

</div>
<div class="row2">
    <br> <a href="oDAw7vW7H0c" class="play-youtube">
            <span class="youtube-thumbnail">featured Thumnnail 1</span>
        <div class="title-wrapper-control">
            <span class="featured-title">featured Title of the Video 1</span>
             <span class="featured-date">featured Date  1</span>
        </div>
        </a>

    <br> <a href="5F-Wge37_ys" class="play-youtube">
            <span class="youtube-thumbnail">featured Thumnnail 2</span>
        <div class="title-wrapper-control">
            <span class="featured-title">featured Title of the Video 2</span>
             <span class="featured-date">featured Date  2</span>
        </div>
        </a>

</div>

1 个答案:

答案 0 :(得分:1)

.children()将获取匹配元素集中每个元素的子元素,可选择由选择器进行过滤。

使用find()方法获取当前匹配元素集中每个元素的后代,由选择器,jQuery对象或元素过滤。

$(document).ready(function () {

    $('.play-youtube').click(function (e) {
        e.preventDefault();
        var URL = $(this).attr('href');
        var htm = '<iframe width="438" height="250" src="http://www.youtube.com/embed/' + URL + '" frameborder="0" allowfullscreen="1" ></iframe>';


        $(".active-video-title").html($(this).find(".title").html());
         $(".active-video-date").html($(this).find(".date").html());
        $(".active-video-title").html($(this).find(".featured-title").html());
        $(".active-video-date").html($(this).find(".featured-date").html());
        return false;
    });
});

DEMO FIDDLE