insert content to already inserted content

Question

Hi all,

well, I'm stuck and hope that you can help. I created a text-example and put it to the end of the post. Thank you in advance.

On a site there are e.g. 50 entries - like comments. Some p-elements in some of those entries are containing a special text. This is just a snippet how I get the special text.

$("p:contains('special text')")

I want to get the parent div-element, too and clone the special text and the div-text.

$("p:contains('special text')").parent("div").clone()

Also I want to insert the content a div-element with id=fortext:

$("#fortext").append($("p:contains('special text')").parent("div").clone())

Now, and that's the point where I'm stuck, there are some entries containing a list point. I get the listpoint this way:

$("li:contains('listpoint text'):last").clone()

I'm cloning the 'text' because the text would be removed from the entries.

The entry-list however starts with entry#1 and ends with entry#50. It has a chronology. By cloning the p-elements content and inserting it in my div the chronology of the entries is adhered.

I wanted to add the listpoint(s) as well. If I use append like:

$("#fortext").append($("p:contains('special text')").parent("div").clone()).append($("li:contains('listpoint text'):last").clone());

The content of the li-element is inserted,yes, but after the inserted p-elements content. How can I insert the li-elements content to the p-elements content? So that the chronological order of the entries is hold?

---

entry#1 special text 1

entry#2 no text

entry#3 listpoint text

entry#4 special text 2

// My output is:

special text 1 div text

special text 2 div text

listpoint text

// My output should be:

special text 1 div text

listpoint text

special text 2 div text

Edit

You can find the html-structure I'm referring to here

Answer 1

I don't totally grasp what you are trying to accomplish, but it seems to me it would be easier to just clone everything to maintain the order you want, and then prune out what you don't want.

Something like:

var $cloned = $(...).clone();
$cloned.find("p.some-selector").addClass("keep");
$cloned.find("ul.another-selector").addClass("keep");
$cloned.find("p,ul").not(".keep").remove();
$cloned.find("p,ul").removeClass("keep");
$("#fortext").append($cloned);