I want to rebuild this without .parent because i have trouble when i connect this in wordpress. I want in js add and remove specyfic classes without using parent. Change parent to specyfic class. How i can do that?
Can i save funcionality of this without .parent function in js?
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
removeNewClass();
var id = this.id;
var $target = $('#' + id + 'show').show();
var newClass = 'long';
$(this).hide().parent().addClass(newClass);
$('.tab').show();
$contents.not($target).hide();
});
$('.close').click(function() {
removeNewClass();
$(this).parent().hide();
$(this).parent().prev('.tab').show();
var $target = $(this).parent();
});
function removeNewClass(){
$contents.each(function() {
var id = $(this).attr('id');
var postClass = 'post' + id.split('tab')[1];
console.log( postClass );
$(this).parent().attr("class", postClass);
});
}
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>
</div>
I had a similar issue recently where I was encountering some weird bugs while using .parent(). To combat this, I used data attributes.
More specifically, I set a data-target attribute on the closing button that contained a query of the element that I wanted to close. This query can then be easily passed to jQuery to find the exact element you want on the page. It's much more accurate and consistent compared to using relative elements.
var $contents = $('.tab-content');
$contents.hide();
var newClass = 'long';
$('.tab').click(function() {
var $target = $($(this).data('target'));
$target.addClass(newClass);
$target.find('.tab-content').show();
$target.find('.tab').hide();
});
$('.close').click(function() {
var $target = $($(this).data('target'));
$target.removeClass(newClass);
$target.find('.tab-content').hide();
$target.find('.tab').show();
});
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab" data-target=".post1">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close" data-target=".post1">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab" data-target=".post2">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close" data-target=".post2">close</div>
</div>
</div>
Is that what you're looking for?
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
removeNewClass();
var id = this.id;
var $target = $('#' + id + 'show').show();
var newClass = 'long';
$('.tab').show();
$(this).hide()[0].parentNode.classList.add(newClass);
$contents.not($target).hide();
});
$('.close').click(function() {
removeNewClass();
var parent = $(this.parentNode);
parent
.hide()
.prev('.tab')
.show();
});
function removeNewClass(){
$contents.each(function() {
var id = $(this).attr('id');
var postClass = 'post' + id.split('tab')[1];
console.log( postClass );
$(this.parentNode).attr("class", postClass);
});
}
.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
<div class="close">close</div>
</div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>
</div>
Related
Hello I have this siple accordion, and I have an issue, that whenever i copy text from accordion, click event listener triggers and closes the accordion.
I would like to make it work without using jQuery
How could I fix it?
and how would I make it , so when i click somewhere else than on .question / .answer it would close automaticaly? i tried adding event listener to window, but after a long time of not figuring out how to makeit work I gave up.
here is my codepen : https://codepen.io/drabfi/pen/LYrBxzWhttps://codepen.io/drabfi/pen/LYrBxzW
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container active">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
const accordion = document.querySelectorAll(".content-container");
for(let i=0;i<accordion.length;i++){
accordion[i].addEventListener("click", function (){
if(this.classList.contains("active")){
accordion.forEach((panel)=>panel.classList.remove("active"));
}else{
accordion.forEach((panel)=>panel.classList.remove("active"));
this.classList.add("active");
}
})
}
.accordion{
margin: 0 auto;
width: 60%;
border-color: #fff;
padding: 2rem;
border-radius: 30px;
&-title{
margin-bottom: 2rem;
text-align: center;
}
.content-container
.question{
padding: 1rem 0;
font-size: 22px;
cursor: pointer;
border-bottom: 1px solid #000;
position: relative;
&::after{
content: "+";
position: absolute;
right: -5px;
}
}
.answer{
padding-top: 1rem;
font-size: 22px;
line-height: 1.5;
width: 100%;
height: 0px;
overflow: hidden;
transition: all .5s;
}
}
// js styling link
.accordion .content-container.active{
.question{
&::after{
content: "-";
font-size: 2rem;
transition: .5s;
}
}
.answer{
height: 150px;
}
}
I would be very happy to see the solutions so I could move on from this spot. Thank you for any advices.
you need to learn a bit about event delegation...
const
accordion = document.querySelector('.accordion')
, accordionEl = accordion.querySelectorAll('.content-container')
;
accordion.onclick = ({target: elmAcc}) =>
{
if (!elmAcc.matches('.content-container > div.question')) return // select only this div
let elContainer = elmAcc.closest('.content-container')
if (elContainer.classList.toggle('active'))
accordionEl.forEach( panel => panel.classList.toggle('active', panel===elContainer))
}
// clicking outside will close accordion :
document.addEventListener('click', event =>
{
if (!accordion.contains(event.target))
accordionEl.forEach( panel => panel.classList.remove('active'))
});
.accordion {
margin : 0 auto;
width : 60%;
border-color : #fff;
padding : 2rem;
border-radius : 30px;
}
.accordion-title {
margin-bottom : 2rem;
text-align : center;
}
.accordion .content-container .question {
padding : 1rem 0;
font-size : 22px;
cursor : pointer;
border-bottom : 1px solid #000;
position : relative;
}
.accordion .content-container .question::after {
content : "+";
position : absolute;
right : -5px;
}
.accordion .answer {
padding-top : 1rem;
font-size : 22px;
line-height : 1.5;
width : 100%;
height : 0px;
overflow : hidden;
transition : all 0.5s;
}
.accordion .content-container.active .question::after {
content : "-";
font-size : 2rem;
transition : 0.5s;
}
.accordion .content-container.active .answer {
height : 150px;
}
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
I have a list of content which is all viewable on desktop. On mobile, I have hidden some of the content and want to add a button, which on click, would show the hidden content.
I'm aware of how to hide and show div's on click, ie.
function showClass(id) {
var elem = document.getElementById(id);
var visible = getComputedStyle(elem).display == "block";
if (!visible) {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
But unsure on how to approach this for items that are in the same class that are hidden via nth-child?
Markup:
#media(max-width: 576px){
.wrapper:nth-of-type(n+4) {
display: none;
}
}
.showmore{
display: none;
}
#media(max-width: 576px){
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore" onclick="show">Show more</a>
</div>
Use the :not() pseudo-class to only hide the items when the .show-all class is not present on the container:
const container = document.querySelector('.container')
const showmore = document.querySelector('.showmore')
showmore.addEventListener('click', () =>
container.classList.toggle('show-all')
)
.showmore{
display: none;
}
#media(max-width: 576px){
.container:not(.show-all) .wrapper:nth-of-type(n+4) {
display: none;
}
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore">Show more</a>
</div>
I'd first change the placement of the "show more" link in the markup, in order to keep a more consistent order of reading.
With this approach you need to hide all the sibling elements of the link and the click event just removes the link itself, showing all the remaining content.
In this example the link is visible under 640px (open the demo in a full page) and I've also inserted a small fade effect over the text before the link (just remove the linear gradient if you are not interested)
document.querySelector('.showmore').addEventListener('click', function(ev) {
ev.preventDefault();
this.remove();
})
.showmore {
display: none;
margin-top: -5em;
}
.showmore::before {
content: "";
display: block;
height: 5em;
background: linear-gradient(to bottom, transparent, #fff);
}
#media all and (max-width:640px) {
.showmore {
display: block;
position: relative;
}
.showmore ~ * { display: none; }
}
<div class="container">
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<a class="showmore" href="#">Show more</a>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
</div>
I cant figure out how to position 3 elements inside a div container(css grid), and keep the page responsive.
title(purple in the img)
photo
comments(green in the img)
the flow i want to achieve
the problem is, if i change the window size, the comments section do not overflow, instead its in-large the div container.
the problem
instad its need to look like this :
the right way
i succeeded to achieve that with max-height: and overflow:scroll, but i believe there must be an easier way(for the max-height part, of course), and more practical.
.post-container {
background-color: rgb(0, 224, 255);
display: grid;
grid-template-areas: 'title title' 'photo comments';
grid-gap: 10px;
padding: 10px;
}
.Title {
background-color: rgb(47, 0, 99);
width: 100%;
grid-area: title;
color: white;
}
.Photo {
grid-area: photo;
}
.Comments {
background-color: rgb(11, 75, 82);
grid-area: comments;
color: white
}
.post-container img {
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="post-container">
<div class="Title">
<h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
</div>
<div class="Photo">
<img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
</div>
<div class="Comments">
<ul>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
</ul>
</div>
</div>
</body>
</html>
If you want the image to set the row's height, the other content(ul) needs to be taken of the flow via position:absolute;.
You need also to set the width of this area via a template grid-template-colums.
Once this area(.Comments) has a width(from template) and an height(from img), set it in position:relative; and size the ul via coordonates. Overflow will come next.
demo below of the idea to avoid ul to resize your grid
.post-container {
background-color: rgb(0, 224, 255);
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas: 'title title' 'photo comments';
grid-gap: 10px;
padding: 10px;
}
.Title {
background-color: rgb(47, 0, 99);
width: 100%;
grid-area: title;
color: white;
}
.Photo {
grid-area: photo;
}
.Photo img {
vertical-align: top;
}
.Comments {
background-color: rgb(11, 75, 82);
grid-area: comments;
color: white;
position: relative;
}
.Comments ul {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
}
.post-container img {
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="post-container">
<div class="Title">
<h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
</div>
<div class="Photo">
<img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
</div>
<div class="Comments">
<ul>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
<li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
</ul>
</div>
</div>
</body>
</html>
<div>
<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
</div>
without testing, should be something like this. one div that have all inside, the second dont have absolute certain is a block, e other two must be side by side.
you can put the style i have i my div in your class of course.
I am trying to make a onClick() button that when pressed, makes text show. My issue is that when I click the button, the button scoots down when the text shows up.
Is there a way to make the button not move when the text appears? Maybe make it actually be there but hidden and on button unhide it? I don't know, I just don't want it to move when the button is pressed.
angular.module('starter.controllers', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.flip = function() {
$scope.coinResult = "Heads";
}
})
<body ng-app="starter">
<head>
<style>
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<ion-content>
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult"></p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
</ion-content>
</body>
One way would be to fix the height of the text div coin-result and give it overflow-y: auto. This ensures that the button stays put.
Demo below:
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
height: 100px;
overflow-y: auto;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
Let me know your feedback on this. Thanks!
Im looking to split a body of html into an array.
Here is an example of what the code looks like:
<p><h2 class="title">Title 1</h2></p>
<p>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</p>
<p><h2 class="title">Title 2</h2></p>
<p>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p><h2 class="title">Title 3</h2></p>
<p>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Basically I'd like to split the sections up using a positive lookbehind with the following pattern <p><h2 class="title">*</h2></p> or any other type of regex pattern.
Essentionally I'm looking to have an array that contains something like so...
<p><h2 class="title">Title 1</h2></p>
<p>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</p>
<p><h2 class="title">Title 2</h2></p>
<p>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p><h2 class="title">Title 3</h2></p>
<p>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
This is the code that will alway be constant <p><h2 class="title">*</h2></p>. The content will always be encapsulate within <p> tags.
Here is an example of the script Im parsing the data through...
$(contentArr).each(function(ele, idx){
var content = ele, contentTrun;
var contentRegex = /(<p>.*<\/p>)/im;
var matchContent = contentRegex.exec(content);
//parse block to get it ready for styling and effect
var contentRegex = /((?!<p><h2 class="title".*?\n)<p>.*<\/p>)/igm;
var parsedContent = content.replace(contentRegex, "$1");
//insert parsed content into html block
$("pressBlocks").insert("<div class=\"blockContentOutter\">\
<span class=\"accordionText\">... <a class=\"readMore\">Read More</a></span>\
<div class=\"blockContent\">"+parsedContent+"</div>\
</div>");
});
As I noted in the comments, this is invalid syntax for HTML:
<p><h2>...</h2></p>
The h2 tag will implicitly close the p tag and they will not be nested (and you will have an empty paragraph before the first heading).
You can solve your problem without regular expressions (although you will need to fix the HTML you are inputting):
contentArr = [
"<h2 class=\"title\">Title 1</h2>\
<p>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>\
<p>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</p>\
<h2 class=\"title\">Title 2</h2>\
<p>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>\
<h2 class=\"title\">Title 3</h2>\
<p>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>"
];
$(contentArr).each( function( index, element ){
$( element ).each( function( i, e ){
if ( !$( e ).is( "h2" ) )
return;
$( '<div class="blockContentOuter" />' )
.append( '<span class="accordionText">... <a class="readMore">Read More</a></span>' )
.append( $( '<div class="blockContent" />')
.append( $(e).nextUntil( "h2" ) ) )
.appendTo( '#pressBlocks' );
});
});
.blockContentOuter {
background-color: lightgrey;
border: 1px solid darkgrey;
margin-top: 0.5em;
}
.blockContent {
background-color: white;
border: 1px solid darkgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pressBlocks" />
Well, ..if you really need a splitter and you know that the input format remains unchanged - just split it with something like this:
var splitter = "<p><h2 class=\"title\">";
output = inputHTML.split(splitter);
for(var i=1; i<output.length){
output[i] = splitter + output[i];
}
but really - there're better ways to do it nice :)
eg. with jQuery:
var output = [];
var $input = $('<div/>').append(inputHTML);
$input.children().each( function(){
var $this = $(this);
if($this.find('h2.title').length || output.length==0){
output.push( $('<div/>').append($this) );
} else {
output[output.length - 1].append($this);
}
});
this will give you your paragraphs splitted in divs ready in 'output' array - to do whatever you need with them.
I've just noticed - that #MT0 is absolutely right - it is not correct to wrap h2 element inside of paragraphs - so my code will work - but only if you nest your inputHTML correctly - with div's or sections or other block elements instead of paragraphs:
<div><h2 class="title">Title 1</h2></div>
<div>Section 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div>velit saepe ducimus aspernatur, quam quaerat autem. Consectetur, vitae.</div>
<div><h2 class="title">Title 2</h2></div>
<div>Section 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div><h2 class="title">Title 3</h2></div>
<div>Section 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>