jquery删除变量内的html元素（jquery对象） [英] jquery remove html elements inside variable (jquery object)

问题描述

内部HTML我有这个DIV：

Inside HTML I have this 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& amp; jquery（两者都是我的弱点），但我没有通过搜索网络找到任何东西，包括stackoverflow上的几个线程，做了它，要么抛出错误，要么仍然包括拇指或删除文本，甚至删除拇指DOM：

I need to capture the content of the DIV minus the first line (the thumbs) in a variable to pass on as title (caption) to a lightbox script. However, in a day I've learned something about javascript & jquery (both are my weak spots), yet nothing I found by searching the web, including several threads here on stackoverflow, did it, either throwing errors or still including the thumbs or removing the text, too, or even removing the thumbs from the 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();

改变链接的顺序也不起作用（虽然我可能错过了一个或另一个）。

Changing the sequence in chainings didn't work either (though I may have missed one or another).

此解决方法似乎没问题：

This workaround seems to be ok:

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

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

However, depending on regex implementation in browsers it might be shaky, so I'd rather have something more robust, particularly not getting the first line at all.

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

TIA for any suggestion - hope I could make myself clear.

修改：

使用 clone（）与<$ c一起使用$ c> children（）或 contents（）让我更进一步。但是，这两个也将删除第一个文本节点，留下两个空 BR ：

using clone() in conjunction with children() or contents() got me a step further. However, both these will also remove the first text node, leaving two empty BR behind:

$("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之外的所有内容，除了而不是（）

OTOH filter("img"), find("img") or not("img") followed by remove() removes everything but the IMGs, which is beyond my head except for not()

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

编辑2：

总结：

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

This is the solution @karaxuna suggested. It is important to re-assign the variable.

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

在进行进一步阅读以更好地理解故障背后的逻辑和最终解决方案时，我得到了一个线索为了做得更多 jquerish ：

While doing some further reading to better understand the logic behind the failures and the final solution I got a clue for doing it slightly more jquerish:

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

线索是添加到 $（）的范围或上下文选择器。在这里使用 this 已经足够熟悉，但我从未想过使用var。此外， end（）将保持 remove（）从仍然一直到DOM ......

The clue is the scope, or context, added to the $() selector. Using this here is familiar enough, yet it never occurred to me to use the var. Also, end() will keep remove()from still going all the way to the DOM...

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

$.trim technically not necessary of course, HTML ignores empty lines anyway.

所以包括上面的正则表达式解决方法至少有三种方法可以去 - 有点让我想起Perl;）

So including the above workaround with regex there are at least three ways to go - kinda reminds me of Perl ;)

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

Thanks to both @karaxuna and @Ravi for sharing their experience and ideas!

推荐答案

不需要 html（）

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

编辑：

试试这个：

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

这篇关于jquery删除变量内的html元素（jquery对象）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！