13

在 HTML 里面我有这个 DIV：

<div class="teaser">
  <img src="thumb1.jpg"><img src="thumb2.jpg"><br>  // usually one thumb image; can be up to three
  some text goes here, sometimes not<br>
  <a href="example.html">always a link here</a><br>
  and sometimes another line here
</div>

我需要捕获 DIV 的内容减去变量中的第一行（拇指），以作为标题（标题）传递给灯箱脚本。然而，在一天之内，我学到了一些关于 javascript 和 jquery 的东西（两者都是我的弱点），但是我通过搜索网络没有发现任何东西，包括 stackoverflow 上的几个线程，做到了，要么抛出错误，要么仍然包括拇指或也删除文本，甚至从 DOM 中删除拇指：

// takes the whole
var teaser = $(".teaser");

// TypeError: $(...).html(...).find is not a function
var teaser = $(".teaser").find("img").remove();

// IMGs removed from DOM
var teaser = $(".teaser").find("img").remove();

// IMGs still included; I think I understand why
var teaser = $(".teaser").not("img");

// ditto
var teaser = $(".teaser").clone().not("img");

// ditto:
var teaser = $(".teaser");
$(teaser).find("img").remove();

// no teaser at all (everything removed, not just the IMGs)
var teaser = $(".teaser");
teaser = $(teaser).find("img").remove();

// ditto
var teaser = $(".teaser").clone().find("img").remove();

更改链接中的顺序也不起作用（尽管我可能错过了一个或另一个）。

这种解决方法似乎没问题：

var teaser = $(".teaser").html().replace(/(<img.*?)+<br[^>]*?/i,"");

但是，根据浏览器中的正则表达式实现，它可能会不稳定，所以我宁愿拥有更强大的东西，特别是根本没有得到第一行。

TIA 的任何建议-希望我能说清楚。

编辑：

clone()结合使用或children()让contents()我更进一步。但是，这两个也会删除第一个文本节点，留下两个空BR的：

$("div.teaser").each(function() {
  var teaser = $(this).clone().children().not("img");
  var teaser = $(this).clone().contents().not("img");
});

OTOH filter("img")，find("img")或not("img")随后remove()删除除 IMG 之外的所有内容，除了 IMGnot()

var teaser = $(this).clone().find("img").remove();

编辑2：

总结一下：

这是@karaxuna 建议的解决方案。重新分配变量很重要。

var teaser = $(this).clone();
teaser.find("img,br:first").remove();
teaser = $.trim(teaser.html());

在做一些进一步阅读以更好地理解失败背后的逻辑和最终解决方案时，我得到了一个线索，可以稍微多一点 jquerish：

var teaser = $(this).clone();
teaser = $.trim($("img,br:first",teaser).remove().end().html());

线索是添加到$()选择器的范围或上下文。在这里使用它已经很熟悉了，但我从未想过使用 var. 此外，end()将remove()不再一直到 DOM ......

$.trim当然，技术上没有必要，HTML 无论如何都会忽略空行。

因此，包括上述正则表达式的解决方法，至少有三种方法可以去——有点让我想起 Perl ;)

感谢@karaxuna 和@Ravi 分享他们的经验和想法！

4

3 回答 3

19

不需要html()

var teaser = $(".teaser").find("img").remove();

编辑：

试试这个：

var teaser = $(".teaser").clone();
teaser.find("img").remove()
// use teaser
于 2013-03-07T11:27:07.633 回答
1

如果你想删除整个 html。然后你可以使用 empty() 方法

$(".teaser").empty();

如果您仅删除图像。然后

$(".teaser").find("img").remove();
于 2013-03-07T11:30:17.290 回答
1

来晚了，试试这个$('img',$('.teaser')).remove().end().clone()

于 2013-06-10T03:01:20.397 回答