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）您尚未在就绪函数前添加jquery选择器（$）。

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

<强> Working Demo

Answer 2

试试这个：

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

Answer 3

$('div.full').find('img').each(function() {
   // your code here ..
});

如何在使用多个div时正确使用JQuery .find（）

3 个答案: