2013-03-07 2 views
6

Внутри HTML У меня есть этот DIV:JQuery удаление HTML-элементов внутри переменной (JQuery объект)

<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(); 

Изменение последовательности в chainings не сработало (хотя я, возможно, пропустили один или другой).

Это решение, как представляется, хорошо:

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

Однако, в зависимости от регулярного выражения реализации в браузерах может быть шатким, поэтому я предпочел бы что-то более надежное, особенно не получает первую строку на всех.

TIA за любое предложение - надеюсь, что смогу проясниться.

Edit:

использованием 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() удаляет все, кроме ГИМ, который находится за пределами моей головы, за исключением not()

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

Edit 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 для обмена опытом и идеями!

ответ

14

Нет необходимости html()

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

EDIT:

Попробуйте это:

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

Вы правы насчет HTML() и я удалил его. Это необходимо только в методе замены(). – JayAitch

+2

Это полностью удаляет IMG. 'var teaser = $ (" teaser "). clone(). find (" img "). remove();' хранит IMG, но удаляет текст (sic!), в то время как 'var teaser = $ (" teaser ") .clone(). not ("img"); 'сохраняет весь DIV (над моей головой), используя' filter ("img") 'вместо этого приводит к отсутствию заголовка (имеет смысл). – JayAitch

+0

@JayAitch см. Вопрос edit – karaxuna

0

, если Вы хотите, чтобы удалить весь HTML. то вы можете использовать метод empty()

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

если вы удаляете изображение только. затем

$(".teaser").find("img").remove(); 
+0

@karaxuna @Ravi: спасибо, но они полностью удаляют IMG из DOM. Мне нужно удалить их из 'var teaser' (или, скорее, не получить их в var в первую очередь). – JayAitch

0

Это поздно, но попробовать это $('img',$('.teaser')).remove().end().clone()

Смежные вопросы