I have a repeating container with a few span elements. I would like to remove two, and re-arrange one of the elements as the example below. I started with something like this:
$('span.class5').insertBefore('span.class0');
This added each span.class5 found on page inside each repeating container, so that didn't work.. How do I do this best with jQuery?
HTML:
<div class="container">
<div class="group">
<span class="class0"></span>
<span class="class1"></span>
<span class="class2"></span>
<span class="class3"></span>
</div>
<div class="group">
<span class="class4"></span>
<span class="class5"></span>
<span class="class6"></span>
<span class="class7"></span>
<span class="class8"></span>
</div>
</div>
Rearrange to:
<div class="container">
<div class="group">
<span class="class0"></span>
<span class="class5"></span>
<span class="class1"></span>
<span class="class2"></span> = remove
<span class="class3"></span> = remove
</div>
<div class="group">
<span class="class4"></span>
<span class="class6"></span>
<span class="class7"></span>
<span class="class8"></span>
</div>
</div>
One solution possible :
( with jQuery)
// I would like to remove two
$('.class2 , .class3' , '.group').remove();
//This added each span.class5 found on page inside each repeating container
$('span.class5').each(function(){
var $el = $(this);
var $father = $el.parents('.container');
// if you don't want to use a class for the container
// decomment line under
//var $father = $el.parent().parent();
$el.insertAfter($father.find('.class0'))
});
span{
border : solid 1px #EEE;
display : inline-block;
padding : 3px;
margin : 3px;
}
.container{
border : solid 1px #CCC;
padding 3px;
margin : 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
You could use the parent > child selector to restrict operations to a specific container:
function rearrange(num) {
$('.container' + num + ' > .group > .class2').remove();
$('.container' + num + ' > .group > .class3').remove();
$('.container' + num + ' > .group > .class5').insertBefore($('.container' + num + ' > .group > .class0'));
}
.group {
background-color: lightgray;
margin: 4px
}
.group span {
margin: 3px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
<button onclick="rearrange(1)">Rearrange</button>
</div>
<div class="container2">
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
<button onclick="rearrange(2)">Rearrange</button>
</div>
Related
It's the first time to ask a question through stackoverflow.
I hope someone can help to solve this problem.
my purpose is hide X picture when Y picture is exist in each review area.
kind of widget code I only possible to input custom CSS and js.
I tried like below with jquery, but i think it's wrong.
Please, help to solve this problem.
/*$('#pd-review-list .widget_w .widget_item').each(function(index) {
// index has the count of the current iteration
var foo = this;
console.log( foo );
var zoo = $(foo).find('.widget_item_tab_2_photo > img');
console.log(zoo);
if(zoo.length === 1) {
$('.widget_item > .widget_item_product').css('display', 'none');
}
});*/
if($('.widget_w .widget_item > .widget_item_tab_2_photo > img').next('img').length > 0) {
$('.widget_item > .widget_item_product').css('display', 'none');
} else {
$('.widget_item > .widget_item_product').css('display', 'block');
};
// if each .widget_w .widget_item > widget_item_tab_2_photo > img tag exist = in that element's .widget_item > .widget_item_product css change display: none
.widget_item_product {
height: 300px;
width: 300px;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="widget_w">
<div class="widget_item" id="review_normal_8875193" value="8875193">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;"></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">네이버 페이 ***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p></div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875193)"></div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 28일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875193"></div>
</div>
</div>
</div>
</div>
<div class="widget_item" id="review_normal_8875194" value="8875194">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;">
<i class="la la-camera" style="margin-right:10px; margin-left:10px; font-size:18px"></i></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">winsh***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text widget_item_collapse" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p></div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875194)">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" data-loaded="true">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
</div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 18일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875194"></div>
</div>
</div>
</div>
</div>
<div class="widget_item" id="review_normal_8875195" value="8875195">
<div class="widget_item_product" style="background-image:url('https://akuo.ai/wp-content/uploads/2020/08/placeholder.png')" onclick="redirect_to_product('23')"></div>
<div style="display:flex;flex-direction:column;flex-grow:1;width:1px;" class="widget_item_size">
<div class="widget_item_tab_1 widget_item_tab_1_2">
<div style="margin-right:10px;display:flex;justify-content: flex-start;"></div>
<div style="color: #777777;">
<i class="la la-camera" style="margin-right:10px; margin-left:10px; font-size:18px"></i></div>
</div>
<div class="widget_item_tab_1 widget_item_tab_1_1">
<div class="widget_item_username">
<span class="widget_item_username_1">NAME </span><span class="widget_item_username_2">winsh***</span>
</div>
</div>
<div class="widget_item_tab_2">
<div class="widget_item_tab_2_text widget_item_collapse" onclick="review_more_11924()">
<div class="widget_item_content"><p>Lorem Ipsum</p>/div>
<span class="widget_item_more_button widget_item_more_button_1">더보기 <i class="la la-angle-down"></i></span>
<span class="widget_item_more_button widget_item_more_button_2">접기 <i class="la la-angle-up"></i></span>
</div>
<div class="widget_item_tab_2_photo" onclick="review_detail_11924(8875195)">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg" data-loaded="true">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
<img class="widget_item_photo widget_item_photo_s lozad" data-src="https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg">
</div>
<div style="flex-grow:0"></div>
<div class="widget_item_date">2021년 1월 18일</div>
<div class="widget_item_tab_2_etc"> <!-- 20/08/11 수정중 -->
<div class="widget_item_etc" value="8875195"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I have div blocks which contain title and information. I have a script which works and search but for all information. I need my search works only for title. I think about maybe make some filter for search by .overlay-cls and h4
My script:
jQuery("#country_search").keyup(function() {
var filter = jQuery(this).val();
jQuery('.country-grid div').each(function() {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
jQuery('.country-info').show();
} else {
jQuery(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input placeholder="Search Country" type="text" id="country_search" class="find_country">
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image: url('')">
<div class="overlay-cls">
<h4>Afghanistan</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Afghan Afghani (AFN)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>10% - 20%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Albania</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Albanian Lek (ALL)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>20 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>16.7%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Algeria</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Algerian Dinar (DZD)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>up to 26%</strong>
</span>
</div>
</div>
You want to search the h4 in each .country-box:
$("#country_search").keyup(function () {
var filter = $(this).val().trim().toLowerCase();
$('.country-box.search').each(function () {
if ($(this).find("h4").text().toLowerCase().includes(filter)) {
$(this).show();
} else {
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input placeholder="Search Country" type="text" id="country_search" class="find_country">
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image: url('')">
<div class="overlay-cls">
<h4>Afghanistan</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Afghan Afghani (AFN)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>10% - 20%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Albania</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Albanian Lek (ALL)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>20 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>16.7%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Algeria</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Algerian Dinar (DZD)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>up to 26%</strong>
</span>
</div>
</div>
I've used String#includes with String#lowerCase because your regex-based approach will fail if the user enters characters that have special meaning in regex, and because you're aiming for a simple substring search, which does not require the capabilities of regex in the first place.
I'm creating a garage system and when my user clicks on a selected item, I wish to show the car picture for it. However the divs that contain the images all have the same class name, so all cars are showing up.
I'm trying to show only the class="imagem" from the selected item (active) not all.
$(document).on('click', '.item', function() {
let $el = $(this);
let isActive = $el.hasClass('active');
$('.item').removeClass('active');
$('.imagem').fadeOut(500);
if (!isActive) {
$el.addClass('active');
$('.imagem').fadeIn(500);
}
});
.imagem {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
<h1>GARAGE</h1>
</div>
<div id="subtitle">
<span class="sub1">MODEL: </span>
<span class="sub2">DOCUMENTS:</span>
<span class="sub3">PRICE:</span>
</br>
</div>
<div class="item" data-item-name="bugatti">
<div id="itemname">Bugatti</div>
<div id="itemqtd">Indeed</div>
<div id="itempeso">$ 320.100</div>
<div class="imagem">
<img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/bugatti.png" />
<div class="status">
<span class="stat1">Motor: </span><span class="stat2">100%</span></br>
<span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
<span class="stat1">Fuel: </span><span class="stat2">10%</span></br>
</div>
</div>
</div>
<div class="item" data-item-name="another">
<div id="itemname">Another Car</div>
<div id="itemqtd">Indeed</div>
<div id="itempeso">$ 20.000</div>
<div class="imagem">
<img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/another.png" />
<div class="status">
<span class="stat1">Motor: </span><span class="stat2">100%</span></br>
<span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
<span class="stat1">Fuel: </span><span class="stat2">100%</span></br>
</div>
</div>
</div>
$('.imagem')` will always return you all the available elements on the page.
You have to find the .imagem class from its parent with find.
$(document).on('click', '.item', function() {
let $el = $(this);
let isActive = $el.hasClass('active');
$('.item').removeClass('active');
$el.find('.imagem').fadeOut(500);
if (!isActive) {
$el.addClass('active');
$el.find('.imagem').fadeIn(500);
}
});
.imagem {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
<h1>GARAGE</h1>
</div>
<div id="subtitle">
<span class="sub1">MODEL: </span>
<span class="sub2">DOCUMENTS:</span>
<span class="sub3">PRICE:</span>
</br>
</div>
<div class="item" data-item-name="bugatti">
<div id="itemname">Bugatti</div>
<div id="itemqtd">Indeed</div>
<div id="itempeso">$ 320.100</div>
<div class="imagem">
<img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/bugatti.png" />
<div class="status">
<span class="stat1">Motor: </span><span class="stat2">100%</span></br>
<span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
<span class="stat1">Fuel: </span><span class="stat2">10%</span></br>
</div>
</div>
</div>
<div class="item" data-item-name="another">
<div id="itemname">Another Car</div>
<div id="itemqtd">Indeed</div>
<div id="itempeso">$ 20.000</div>
<div class="imagem">
<img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/another.png" />
<div class="status">
<span class="stat1">Motor: </span><span class="stat2">100%</span></br>
<span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
<span class="stat1">Fuel: </span><span class="stat2">100%</span></br>
</div>
</div>
</div>
You could declare a variable for the div you want to affect and then use the jquery find option to just get the nested div.
$(document).on('click', '.item', function() {
let $el = $(this);
let isActive = $el.hasClass('active');
$('.item').removeClass('active');
//Delcare variable as jquery object and just get the closest div
var $imageDiv = $el.find('.imagem');
$imageDiv.fadeOut(500);
if (!isActive) {
$el.addClass('active');
$imageDiv.fadeIn(500);
}
});
.imagem {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
<h1>GARAGE</h1>
</div>
<div id="subtitle">
<span class="sub1">MODEL: </span>
<span class="sub2">DOCUMENTS:</span>
<span class="sub3">PRICE:</span>
</br>
</div>
<div class="item" data-item-name="bugatti">
<div id="itemname">Bugatti</div>
<div id="itemqtd">Indeed</div>
<div id="itempeso">$ 320.100</div>
<div class="imagem">
<img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/bugatti.png" />
<div class="status">
<span class="stat1">Motor: </span><span class="stat2">100%</span></br>
<span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
<span class="stat1">Fuel: </span><span class="stat2">10%</span></br>
</div>
</div>
</div>
<div class="item" data-item-name="another">
<div id="itemname">Another Car</div>
<div id="itemqtd">Indeed</div>
<div id="itempeso">$ 20.000</div>
<div class="imagem">
<img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/another.png" />
<div class="status">
<span class="stat1">Motor: </span><span class="stat2">100%</span></br>
<span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
<span class="stat1">Fuel: </span><span class="stat2">100%</span></br>
</div>
</div>
</div>
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.
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>