Develop Reference

How to set large amount of HTML in Vue.js template?

I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.

There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.

Clicking on a button unable to change the values using jquery

I am having three different blocks it is hourly pricing, Monthly Pricing and Schedule a call.
By default it will show the details for hourly pricing.
When the user clicks on Monthly Pricing only the amount values should be changed.
Here is the code for that:
$('button').click(function() {
$('button').removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hourly">
<button class="hourlypricing active">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
<div class="col-md-4 beginner">
<h3>Beginner</h3>
<div style="transform:translateY(0rem);opacity:1;" class="">
<span class="_dollar" >$</span>
<span class="amount" >12</span>
<span class="amount" >1999</span>
<span class="hour" >/ hour</span>
<span class="month" >/ month</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 pro">
<h3 >Pro</h3>
<div style="transform:translateY(0rem);opacity:1;" class="" >
<span class="dollar" >$</span>
<span class="amount" >15</span>
<span class="amount" >2499</span>
<span class="hour" >/ hour</span>
<span class="month" >/ month</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ninja">
<h3 >Ninja</h3>
<div style="transform:translateY(0rem);opacity:1;" class="" >
<span class="dollar" >$</span>
<span class="amount" >18</span>
<span class="amount" >2999</span>
<span class="hour" >/ hour</span>
<span class="month" >/ month</span>
</div>
</div>
</div>
</div>
</div>
By default, it should show hourly basis amount when user clicks on Monthly basis only the amount should be changed as if the user selected monthly the amount it should show the amount as $1999/month
Here is the fiddle link for that.

Added class to spans in HTML
<div class="plan-card__body">
<div class="_196p" data-reactid="18">
<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
<span class="_dollar" data-reactid="20">$</span>
<span class="amount hourly_rate" data-reactid="21">12</span>
<span class="amount monthly_rate" data-reactid="21" >1999</span>
<span class="hour" data-reactid="23">/ hour</span>
<span class="month" data-reactid="23">/ month</span>
</div>
</div>
</div>
Use jquery show/hide to show the hourly package/monthly package depending on button click.
Also, use .on instead of .click. For more information refer to Difference between .on('click') vs .click()
Jquery Code
$(document).ready(function() {
$(".monthly_rate, .month").hide();
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
if ($(this).prop("class") == "monthlypricing active") {
$(".monthly_rate, .month").show();
$(".hourly_rate, .hour").hide();
} else if ($(this).prop("class") == "hourlypricing active") {
$(".monthly_rate, .month").hide();
$(".hourly_rate, .hour").show();
}
});
});
Working code fiddle link

I think you are looking for this:
$(document).ready(function(){
$("span.monthlypricing").hide()
$('button').click(function() {
$('button').removeClass('active');
$(this).addClass('active');
if($(this).hasClass("hourlypricing")){
$("span.monthlypricing").hide()
$("span.hourlypricing").show()
}
if($(this).hasClass("monthlypricing")){
$("span.hourlypricing").hide()
$("span.monthlypricing").show()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hourly">
<button class="hourlypricing active">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
<div class="col-md-4 beginner">
<div class="plan-card__card-wrapper">
<header class="plan-card__header">
<h3 class="plan-card__name">Beginner</h3>
</header>
<div class="plan-card__body">
<div class="_196p" data-reactid="18">
<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
<span class="_dollar" data-reactid="20">$</span>
<span class="amount hourlypricing" data-reactid="21">12</span>
<span class="amount monthlypricing" data-reactid="21">1999</span>
<span class="hour hourlypricing" data-reactid="23">/ hour</span>
<span class="month monthlypricing" data-reactid="23">/ month</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 pro">
<div class="plan-card__card-wrapper">
<header class="plan-card__header">
<h3 class="plan-card__name">Pro</h3>
</header>
<div class="plan-card__body">
<div class="_196p" data-reactid="18">
<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
<span class="dollar" data-reactid="20">$</span>
<span class="amount hourlypricing" data-reactid="21">15</span>
<span class="amount monthlypricing" data-reactid="21">2499</span>
<span class="hour hourlypricing" data-reactid="23">/ hour</span>
<span class="month monthlypricing" data-reactid="23">/ month</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ninja">
<div class="plan-card__card-wrapper">
<header class="plan-card__header">
<h3 class="plan-card__name">Ninja</h3>
</header>
<div class="plan-card__body">
<div class="_196p" data-reactid="18">
<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
<span class="dollar" data-reactid="20">$</span>
<span class="amount hourlypricing" data-reactid="21">18</span>
<span class="amount monthlypricing" data-reactid="21">2999</span>
<span class="hour hourlypricing" data-reactid="23">/ hour</span>
<span class="month monthlypricing" data-reactid="23">/ month</span>
</div>
</div>
</div>
</div>
</div>

Try The following code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hourly">
<button class="hourlypricing active">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
<div class="col-md-4 beginner">
<div class="plan-card__card-wrapper">
<header class="plan-card__header">
<h3 class="plan-card__name">Beginner</h3>
</header>
<div class="plan-card__body">
<div class="_196p" data-reactid="18">
<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
<span class="_dollar" data-reactid="20">$</span>
<span class="amount hour" data-reactid="21">12</span>
<span class="amount month" data-reactid="21">1999</span>
<span class="hour" data-reactid="23">/ hour</span>
<span class="month " data-reactid="23">/ month</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 pro">
<div class="plan-card__card-wrapper">
<header class="plan-card__header">
<h3 class="plan-card__name">Pro</h3>
</header>
<div class="plan-card__body">
<div class="_196p" data-reactid="18">
<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
<span class="dollar" data-reactid="20">$</span>
<span class="amount hour" data-reactid="21">15</span>
<span class="amount month" data-reactid="21">2499</span>
<span class="hour" data-reactid="23">/ hour</span>
<span class="month " data-reactid="23">/ month</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ninja">
<div class="plan-card__card-wrapper">
<header class="plan-card__header">
<h3 class="plan-card__name">Ninja</h3>
</header>
<div class="plan-card__body">
<div class="_196p" data-reactid="18">
<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
<span class="dollar" data-reactid="20">$</span>
<span class="amount hour" data-reactid="21">18</span>
<span class="amount month" data-reactid="21">2999</span>
<span class="hour" data-reactid="23">/ hour</span>
<span class="month" data-reactid="23">/ month</span>
</div>
</div>
</div>
</div>
</div>
JS CODE HERE
if($(".hourly").find("active").html() == "Monthly Pricing"){
hideHours();
}else {
hideMonth();
}
$('button').click(function() {
$('button').removeClass('active');
$(this).addClass('active');
if($(this).html() == "Monthly Pricing"){
hideHours();
}else {
hideMonth();
}
});
function hideMonth(){
$("span.hour").each(function(e){
$(this).css("display","inline");
});
$("span.month").each(function(e){
$(this).css("display","none");
});
}
function hideHours(){
$("span.hour").each(function(e){
$(this).css("display","none");
});
$("span.month").each(function(e){
$(this).css("display","inline");
});
}
Click here to see jsFiddle

Getting value form closest div

I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?

The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle

you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO

Hide divs with duplicate data using jQuery

I have a webpage where a long section of divs are pulled in from another application. I can't filter the divs before they're pulled in, but I need to hide divs (using jquery) that contain duplicate data for certain values.
Divs with duplicate data will always appear adjacent to one another and only come in pairs (never 3 or more divs with the same data), but there might be multiple pairs of duplicates on a page. There will never be more than 25 total .data-results divs on a page.
So, in the (long) example below, since #a-2 and #a-3 have exactly the same values for .data-one-result AND .data-two-result, I need to completely hide one of the divs (either one is fine), but leave #a-1 and #a-4 as-is. I don't care about the values in .data-three and it will have different values even in the duplicate divs.
(edit: changed date-one to data-one because of a typo)
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>

Try this : You can iterate all data-results divs and compare result one and two of current div with next div. if result matches then hide next div.
NOTE - You have date-one and data-two where date-one should be data-one (date should be data) for consistency. I have coded using date-one hence make changes once you change in html code.
$(function(){
$('div.data-results').each(function(){
if($(this).is(':visible'))
{
var $nextDiv = $(this).next('div.data-results');
if($nextDiv.length > 0)
{
var thisResultOne = $(this).find('div.date-one .data-one-result').text();
var nextResultOne = $nextDiv.find('div.date-one .data-one-result').text();
var thisResultTwo = $(this).find('div.data-two .data-two-result').text();
var nextResultTwo = $nextDiv.find('div.data-two .data-two-result').text();
if(thisResultOne == nextResultOne && thisResultTwo == nextResultTwo)
{
$nextDiv.hide();
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>

Match the span values with the previous elements using each() and slice() functions.
$('.data-holder > div').each(function(){
var currElement = $(this);
var index = $('.data-holder > div').index($(this))-1;
var previousElements = $('.data-holder > div').slice( 0, index <= 0 ? 0 : index );
console.log(previousElements);
previousElements.each(function(){
if(
$('span',this).first().text() == $('span', currElement).first().text() &&
$('span',this).last().text() == $('span', currElement).last().text()
){
currElement.hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>

don't work submit in JQuery

I have this code code of submit form:
$('.nav_step ul li').live('click', function(event){
$( "#"+where_it ).submit();
event.preventDefault();
});
HTML
<div class="row nav_step">
<ul>
<li class="first">
<a href="/~162/appsite/requirement/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">1</span> Requirements
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/profile/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">2</span> Profile
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/assets/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">3</span> Assets
</span>
</span>
</span>
</a>
</li>
<li class="active">
<a href="/~162/appsite/liability/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">4</span> Liabilities
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/third/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">5</span> Third Parties
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/compliance/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">6</span> Compliance
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/document/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">7</span> Documents
</span>
</span>
</span>
</a>
</li>
<li class="last">
<a href="/~162/appsite/document/result.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">8</span> Submit
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
<form class="form-vertical" id="client-liability-form" action="/~162/appsite/liability/update.html" method="post">
<div style="display:none"><input type="hidden" value="ccc127985bc916e7ee507b4a238173097edf2338" name="YII_CSRF_TOKEN"></div> <fieldset>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev">Previous</strong>
<strong class="btn_save moveSave">Save</strong>
<strong class="btn_next moveNext">Next</strong>
</div>
</div>
<div id="itemsHolder" class="liability">
<div class="large-15 columns box_bg_holder_2 iner_2 liabilityBlock" rel="0">
<div class="indent_holder">
<div class="row indent_5">
<div class="large-3 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<select class="select_box_2 selectLiability" name="ApplicationLiability[0][item_type]" id="ApplicationLiability_0_item_type">
<option value="0" selected="selected">Property Loan</option>
<option value="1">Credit Card</option>
<option value="2">Car Lease</option>
<option value="3">Personal Loan</option>
<option value="4">Other</option>
</select><span class="required_field_text" id="ApplicationLiability_item_type_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns">
<div class="row_label">
<label for="ApplicationLiability_address">Address</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][address]" id="ApplicationLiability_0_address" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_address_em_" style="display: none"></span>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input top_margin">
<div class="row_input_4">
<span class="ownership_text" rel="0">Ownership</span>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
Monthly Payment
</strong>
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly]" id="ApplicationLiability_0_monthly" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Limit
</strong>
<input class="input_box_2 maskMoney limit" name="ApplicationLiability[0][limit]" id="ApplicationLiability_0_limit" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_limit_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Balance
</strong>
<input class="input_box_2 maskMoney balance" name="ApplicationLiability[0][balance]" id="ApplicationLiability_0_balance" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_balance_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
<strong class="btn_delete liability">Delete</strong>
<strong class="btn_add_more liability"><a>Add More</a></strong>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<div class="row_label_2">
</div>
</div>
<div class="large-3 columns">
<div class="row_input_2">
<div class="row_label">
<label class="line" for="ApplicationLiability_bsb">BSB</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][bsb]" id="ApplicationLiability_0_bsb" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_bsb_em_" style="display: none"></span>
</div>
</div>
<div class="row_input_2">
<div class="row_label double_width iner">
<label for="ApplicationLiability_account_number">Account Number</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][account_number]" id="ApplicationLiability_0_account_number" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_account_number_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns">
</div>
</div>
<div class="ownership_block" style="display: none;">
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][118][percent]" id="Ownership_0_118_percent"><span>%</span>
<input type="hidden" value="118" name="Ownership[0][118][applicant_id]" id="Ownership_0_118_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][125][percent]" id="Ownership_0_125_percent"><span>%</span>
<input type="hidden" value="125" name="Ownership[0][125][applicant_id]" id="Ownership_0_125_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
</div>
<div class="row_input">
<input type="text" value="0" name="Ownership[0][126][percent]" id="Ownership_0_126_percent"><span>%</span>
<input type="hidden" value="126" name="Ownership[0][126][applicant_id]" id="Ownership_0_126_applicant_id"> </div>
</div>
<input type="submit" value="Save" class="btn_save">
</div>
</div>
</div> </div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label for="ApplicationLiability_monthly_exp">What are your current Monthly expenses?</label> </div>
</div>
<div class="large-6 columns">
<div class="row_input">
<div class="row_input_4 none">
<strong class="total_price"></strong>
</div>
<div class="row_input_4">
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly_exp]" id="ApplicationLiability_0_monthly_exp" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_exp_em_" style="display: none"></span>
</div>
<div class="row_input_4 none">
<strong class="btn_help_box">
help
<span class="help_box">There Will Be any written comment</span>
</strong>
</div>
</div>
</div>
<div class="large-1 columns">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder_2 iner_4">
<div class="indent_holder">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<div class="row_input_4">
<strong class="total_price">Total:</strong>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
Monthly Payment
</strong>
<strong class="total_price" id="monthly_payment_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Limit
</strong>
<strong class="total_price" id="limit_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Balance
</strong>
<strong class="total_price" id="balance_result">
$ 0 </strong>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner" style="padding-left: 0;">
<div class="large-9 columns">
<div class="row_label">
<label for="ApplicationLiability_comment">Income details (if any):</label> </div>
<div class="row_input">
<textarea class="textarea_box_2" name="ApplicationLiability[0][comment]" id="ApplicationLiability_0_comment"></textarea><span class="required_field_text" id="ApplicationLiability_comment_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns"></div>
</div>
</div>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev">Previous</strong>
<strong class="btn_save moveSave">Save</strong>
<strong class="btn_next moveNext">Next</strong>
</div>
</div>
</fieldset>
<input id="moveType" type="hidden" value="save" name="moveType"> </form>
With event.preventDefault(); links does not work after clicking, without event.preventDefault(); i can't see error message after validation and form is submitted but error message i can't see and page reload without notify user about errors.
If i am use this code for detect errors, form does'n submit and it not work.
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
where_it
this is id of form - work fine.
UPDATE: I want what form submit if is errors users notify about it, if not errors i am go to link.
UPDATE1 When i am use this code
$( "#"+where_it ).submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$( "#"+where_it ).submit();
}else{
alert( "error." );
}
});
I will have just redirect. Not submit form and not any errors. Handler for .submit() not work. This is strange.
UPDATE2
$(document).ready(function(){
$('.nav_step ul li').on('click', function(event){
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
$( "#"+where_it ).submit();
event.preventDefault();
});
});
In this code works all. But if all good i am can't redirected after click event coz event.preventDefault(); not allow it. If this is remove i can't see error message after validation. i think possible solution is do something this if success redirect(url: this .nav_step ul li a). But i don't know how do it.

You need to use event.preventDefault() but you should submit the form manually after everything was ok. $( "#"+where_it ).submit();.
something like this:
$('form').submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$('form').submit();
}
});
This is a simple demo you can check it out and change your code.
HTML:
<form>
<input type='text' id='name' name='name'>
<input type='text' id='last_name' name='name'>
<input type='submit' id='send' value='SEND'>
</form>
<span></span>
JS:
$('form').on('submit', function(event)
{
event.preventDefault();
if($('#name').val() != '' && $('#last_name').val() != '')
{
// here you can submit the form
alert('submitted');
//$('form').submit();
}
else
{
$('span').text('fill the textboxes.');
}
});