Spliting an html content based on a html tag

Question

HTML:

<div id ="split"><p>hi one two three</p><img class ="some class" src="some src" master_src="src" master_w="318" master_h=22"><img class="some" src="src"><h1> 4 5 6</h1></div>

Desired output:

<p>hi one two three</p>
""           
<h1>4 5 6</h1>

How can i get this output ? I wanted a general form if there can be n images inside a div.

$("#split").find('img').each(function(index){
       alert($(this).splitsuchthat()) 
// for first time it should be <p>hi one two three</p>
// secon time ""
// third time <h1> 4 5 6</h1>  

});

http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 — MasNotsram, Jul 25 '14 at 15:57
I still have no clue what you are trying to accomplish. What does img have to do with it? — epascarello, Jul 25 '14 at 15:58
me either, he wants to split by image, but is trying to get other elements. — eg_dac, Jul 25 '14 at 15:58
LOL, hard to give a demo when the question was not clear. So use `prev(":not(img)")` But does not make sense that the last image does not follow the pattern of "before" — epascarello, Jul 25 '14 at 16:00

score 1 · Accepted Answer · answered Jul 25 '14 at 16:16

1

You can use prevUntil (or nextUntil) to get the element between two images. Then you simply need to deal with the remain end:

http://jsfiddle.net/GLZaJ/1/

// a helper function to print the html of elements contained in a jquery object
function toHtmlString($els){
    var clone = $els.clone();

    return $('<div>').append(clone).html();
}

// get all elements before an image
$("#split > img").each(function(index){
    var $prevs = $(this).prevUntil("img");
    var htmlString = toHtmlString($prevs);
    alert(htmlString);
});

// get everything after the last image
var $after = $("#split > img:last").nextAll();
var htmlString = toHtmlString($after);
alert(htmlString);

answered Jul 25 '14 at 16:16

James Montagne

77,516
14
110
130

thanks can i use the $(temp).find('img') since temp is storing the div id – Bad Coder Jul 25 '14 at 17:42
`$(temp).children("img")` is probably slightly better as images within nested elements won't work right. – James Montagne Jul 25 '14 at 18:16
if i am using childern the each loop is not executing (it is not going inside for loop in my code) – Bad Coder Jul 25 '14 at 18:53

score -1 · Answer 2 · answered Jul 25 '14 at 16:08

-1

I am not sure if I understand your question but here is maybe what you need:

$(function(){
    $("#split>*").each(function(index){
                     alert($(this).text()) ;
                     });

});

jsfiddle: http://jsfiddle.net/9Z5Mt/

answered Jul 25 '14 at 16:08

MilMike

12,571
15
65
82

Spliting an html content based on a html tag

2 Answers2