How to select all elements between two h2 - javascript

I am using jQuery. I have the following html fragment:
<h1>Main Title</h1>
<h2>One header</h2>
<p>some text</p>
<p>more text</p>
<ul><li>a list</li></ul>
<h2>Another header</h2>
one link
<h3>ddd</h3>
<p>eee</p>
<h2>Header 3<h2>
<p>This is a Paragraph</p>
I need to get the content that is between every h2 element, in order to do something like this:
First Section text
some text
more text
Second section text
one link
ddd
eee
Third section text
This is a Paragraph
I've read this resource:
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
but still cannot figure how to do what I need.
Thanks in advance!

I'd suggest the following:
$('h2').each(function(){
var self = $(this),
// gets everything between the $(this) and the next 'h2' element:
contents = self.nextUntil('h2'),
/* creates a new div with which to wrap,
and inserts after the current $(this): */
newWrap = $('<div />').insertAfter(self);
// appends the contents to the new div element:
newWrap.append(contents);
});
JS Fiddle demo.
While the above works, for its intended use, and illustrates nextUntil() (which is definitely the method to use in this scenario), I'm unsure how I might show you how to achieve your aims, since you seem to have left your use-case/requirements rather vague.
References:
append().
each().
insertAfter().
nextUntil().

I believe the nextUntil method is what you're looking for.
http://api.jquery.com/nextUntil/

A good solution would be to put the content you wish to retrive in a <div> tag with an id, and use jQuery to retrive it's content like so: $('#divid').text()

Related

Target and convert html text into a class for a parent element

I'm new to jQuery. I have been struggling to figure out a way to take the contents of some h4 tags within a set of divs that have the class of "post" and use their text to add/create an additional class for their parent "post" divs.
I want to add an additional class to the parent "post" div from the contents of that div's h4.tag. I've been able to use the text() function to add classes to the parent divs but the problem is I'm adding every h4 's content as a class to every parent div of "post."
Here's my code:
var texth4 = $('h4.tag').text();
$(".post").each(function() {
$(this).addClass(texth4);
});
If someone has some guidance I would sincerely appreciate it.
If I understand correctly, you'd want this:
$('.post').each(function() {
var texth4 = $(this).find('h4').text();
$(this).addClass(texth4);
});
The difference in what you had and this is that the variable is set to the text value of the H4 element inside that particular instance of .post.
This assumes an HTML structure like this:
<div class="post">
<h4>Heading Text</h4>
...
</div>
And would result in this:
<div class="post Heading Text">
<h4>Heading Text</h4>
...
</div>
Demo

Replacing HTML content without using jquery

I have a HTML content like this:
some of the string content <font color=blue>Test content <BR><BR><BR>
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
</font>
I want to remove the div without removing it's content, so the resultant data should look like
some of the string content `<font color=blue>Test content <BR><BR><BR>`
some more goes here
<P>Test Content</P>
</font>
Please note that i do not want to remove the content of the div, also i do not want to add any unwanted HTML element just to remove the div. I have tried various techniques but none of them is working at the moment.
I tried this replacing the innerHTML but it did'nt worked. I can not use replaceChild, as
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
is a combonation of text plus HTML so CreateTextNode does'nt workks here as it changes all HTML to plain text.
Please suggest. Thanks a Ton..
Loop over the elements inside the div (use childNodes as it also includes text nodes, while children does not).
Place the elements one-by-one before the div using insertBefore.
Remove the div using removeChild.
This will do the trick:
var el = document.getElementById('idOfTheDiv');
while (el.childNodes.length) {
el.parentNode.insertBefore(el.childNodes[0], el);
}
el.parentNode.removeChild(el);
Demo: http://jsfiddle.net/VG5ZF/
el.parentNode.insertBefore(el.childNodes[0], el); moves the first child node outside from element, reducing the length of childNodes NodeList. So in every iteration el.childNodes[0] is going to be next one. Until there are childs.

Find element that is not inside specific parent

I am trying to figure out how to find an element that is NOT inside specific parent. Here is a sample html:
<div class="id01">
<p>some text</p>
</div>
<p>some more text</p>
<p>some more more text</p>
Ok, now I need to find a first paragraph that is not inside parent #id01 and that is where I am getting lost. I started to do it like that
$('p:first').text(); //this way i would get the P inside DIV but I want to skip that one and count on next one that has no parent #01
Hope i made it clear.
You could easily use the :not() selector for that, in combination with :first .
$("p:not(.id01 p):first").text()
JSFiddle.
Solution 1 :
$('p').not('.id01 *').eq(0)
Solution 2 :
$('p').filter(function(){ return $(this).closest('.id01').length==0 }).eq(0)
Very simple way, as suggest by adamb all this stuff is on the jQuery site, but here
$("p:first").not($(".id01 p"));
Should give you what you want.
you could use the .next() selector
$("div.id01").next('p')
Use eq() for the index of <p>
console.log($('p').eq(1).text()); //some more text
console.log($('p').eq(2).text()); //some more more text

How can I say this in jQuery?

I want to append some text after 2 closing divs to a sector element.
Click me
</div>
</div>
// this is where I want to append the text
My code appends the text after the link. How can I say "append it after the 2nd closing div"?
$('a.thingIClicked').click(function() {
$(this).append('hello');
});
The most direct way to do this is to find the second parent <div> element, and then insert the text after it.
$('a.thingIClicked').click(function() {
$(this).parent("div").parent("div").after("some text");
});
This will insert the text on the outside of the second <div> parent. Using append() will put the text on the inside of the parent, which from your example doesn't appear to be what you want.
There's probably a more elegant solution, but how about:
$('a.thingIClicked').click(function() {
$(this).parent().parent().after('hello');
});
Edit: #Zack is correct (and should probably get the answer credit for this one) - my original code would have added the text into the second enclosing div, rather than after it. I've edited my code above accordingly.
The easiest way would be to give the outer div an id and then use $("#outerdivid").
EDIT: Below will not work, but leaving it here for reference
However, you should also be able to use a jquery :parent filter:
http://api.jquery.com/filter/
$('a.thingIClicked').filter(':parent').filter(':parent').click(/**/);
Use .insertAfter()
http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');
Use .insertAfter() - http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

Replacing the content of a div with the content of another hidden div in Jquery

i am trying to replace the content of a div with the content of another div(which is hidden). The code works for the first time only but the second time doesn't work at all.
I have a div where the titles of some articles are scrolling. I want to achieve that:everytime i am going to click the title of an article its content(the content is in hidden div) is going to appear in another div with the id="sreen".
<script type="text/javascript">
//everytime you click the title of an article
$("a.title").live("click", function(){
//replace the content of div screen with the content of an article
$('div#screen').replaceWith($(this).next('div.content'));
});
</script>
Any ideas???
Using .replaceWith will effectively remove div#screen. So using .html() will be what you want to do to maintain the element div#screen.
You mentioned that your formating is not working correctly which leads me to believe you have css classes on div.content. Calling .html() on div.content will ommit the root node of div.content.
<div class="content">
<span>some text</span>
</div>
$("div.content").html() will produce <span>some text</span>
If my assumptions are correct you might want to look at using clone() which will clone the current object without events or clone(true) to include any data and events.
var $content = $(this).next('div.content').clone();
$content.css("display", "block");
$('div#screen').html($content);
Another way of doing this would be use .outerHTML
$("a.title").live("click", function() {
$('div#screen').html($(this).next('div.content')[0].outerHTML);
});
Example on jsfiddle.
use the .htmldocs method for this
<script type="text/javascript">
//everytime you click the title of an article
$("a.title").live("click", function(){
//replace the content of div screen with the content of an article
$('div#screen').html( $(this).next('div.content').html() );
});
</script>

Categories