jQuery select everything between divs except some tables divs

Question

I would like to get the html between two Divs for my page except a table which contains hidden values for jqplot and also a big Div for this jqplot. It seems like I should use jQuery :not() selector to exclude these two elements. However, my code failed. So could anyone give me some suggestions? Here is a demo, and below is the basic idea of my code. The only stuff I need is contents until the first tableThanks!

HTML

<div class="articles">
    <h2 class="model_header">Exponential Model Output</h2>

    <table align="center">
        <!--end 04uberoutput_start-->
    </table>

    <table width="550" border="1">  
    </table>  
####I need nothing below#####
    <p>&nbsp;</p>

    <table width="400" border="0" style="display: none">
    </table>

    <div id="chart1" style="margin-top: 20px; margin-left: 20px; width: 650px; height: 400px; position: relative;" class="jqplot-target">
    </div>

</div>

JS:

  var jq_html = $("div.articles:not(table&div)").html();

adeneo · Accepted Answer · 2013-03-26T23:33:46.977

2

var jq_html = $("div.articles").children(':lt(3)');

Maybe just target all children with a zero based index lower than 3, to get :

[0] the H2
[1] first table
[2] second table

EDIT:

A bit late, did'nt notice the comment !

var jq_html = $('<div />').append($("div.articles").children(':lt(3)').clone()).html();

edited Mar 26 '13 at 23:33

answered Mar 26 '13 at 22:37

adeneo

312,895
29
395
388

If I add `var jq_html = $("div.articles").children(':lt(3)').html();`, all I got is `Exponential Model Output`. Is there a way to get selected contents in html format?Thanks! – TTT Mar 26 '13 at 23:08
@tao.hong - edited the answer, and added a solution for that. – adeneo Mar 26 '13 at 23:34
That's is a very neat solution! – TTT Mar 26 '13 at 23:40
@tao.hong - Thanks, it's the usual way of doing this, appending to a container and then getting the container's html. – adeneo Mar 26 '13 at 23:52

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

First, you need an outerHtml() function (see Get selected element's outer HTML). For demonstration purposes, I use the built-in one:

var jq = $("div.articles").children(':not(div#chart1,table:hidden)');
var jq_html = "";
jq.each(function() {
  jq_html += $(this)[0].outerHTML + "\n";
});

edited May 23 '17 at 12:21

Community

1
1

answered Mar 26 '13 at 22:43

Ignitor

2,907
33
50

Thanks.But why I only got `Exponential Model Output ` select? – TTT Mar 26 '13 at 22:57
If you use ` var jq_html = $("div.articles").children(':not(div#chart1,table:hidden)').html(); `, you will only get `Exponential Model Output `... – TTT Mar 26 '13 at 23:06
Ah... now I see. From http://api.jquery.com/html/: Get the HTML contents of the **first element** in the set of matched elements – Ignitor Mar 26 '13 at 23:09
To get the HTML of the matched elements, you need to iterate over the set (e.g. using http://api.jquery.com/each/), get the HTML using an `outerHtml()` function (e.g. http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) and then concatenate the output. – Ignitor Mar 26 '13 at 23:15

score 1 · Answer 3 · answered Mar 26 '13 at 23:13

1

from the jquery.api:

In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned.

http://api.jquery.com/html/

So you can only use .html() to retrieve the first element matched anyways. I'll see if I can think of something.

answered Mar 26 '13 at 23:13

kelly johnson

1,596
3
16
26

Thanks! Can those selected HTML elements addable? – TTT Mar 26 '13 at 23:14
var jq_html = $('body').clone().find('table').remove().end().html() console.log(jq_html); I stumbled on this post at the same time I saw similar in the jquery pocket guide: http://stackoverflow.com/questions/9366382/jquery-get-all-html-source-of-a-page-but-excluding-some-ids – kelly johnson Mar 26 '13 at 23:27

jQuery select everything between divs except some tables divs

3 Answers3