如何在使用多个div时正确使用JQuery .find()

Question

我有一个HTML页面,用户可以在其中创建newsitem.每个新闻项目都显示在一个新的div中,里面有多个div,可以将内容分成多个列,隐藏一些内容等.以下代码是1 newsitem的精简版本:

<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">

<h2>This is a title</h2>

<div class="news-image div-right">
    <a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>

<div class="preview one-image">
    <p>Text here</p>    
</div>

<div class="full div-hide">
    <p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>

正如你所看到的,每个newsitem连接到它生成的代码是用来识别独特newsitems,代码也是在我的JavaScript中使用:

<script type="text/javascript">
(function () {

    var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
    $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });

})();
</script>

这个脚本应该在我的完整div-hide类中找到的图像周围放置一个锚标记,但这不能正常工作.我假设我的jquery选择器没有选择正确的div,但我不知道它应该是什么.你知道如何在class ="full"div中的图像周围包裹我的锚标签吗？

Answer 1

文档就绪功能有两个问题:

1)您尚未$在ready函数前添加jquery selector().

2)您不需要调用文档就绪功能.

  $(function () {
/*^^missing selector here*/ 

   var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
   $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });

});
 /*^^ () not required here*/ 

并使其适用于所有div:

$('.news-item .full img').each(function(){
  $(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});

工作演示