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>

期望的输出：

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

我如何获得此输出？如果div中可以有n个图像，我想要一个通用表单。

$("#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>  

});

Answer 1

您可以使用prevUntil（或nextUntil）获取两张图片之间的元素。然后你只需要处理剩余的结尾：

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

Answer 2

我不确定我是否理解你的问题，但这可能是你需要的：

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

});

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

基于html标记拆分html内容

2 个答案: