How to show only one div with same class then others - javascript

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>

Related

How to hide product item if the price is 0

Some of my products have 0 price. Until I fix this issue I want to hide those products from
collection pages.
So,
How can I hide the .productItem or .ItemOrj if the .productPrice span is == ₺0,00 , else show
Look code below:
<div id="ProductPageProductList" class="ProductList sort_4">
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.950,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0,00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have also tried but not worked:
var amount = parseFloat($('.productPrice span').html().replace(",", "."));
if(amount === 0){
$('.productItem').css("display", "none");
}else{
$('.productItem').css("display", "block");
}

I stripped out the additional HTML for my answer since it doesn't affect my answer.
But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.
$(document).ready(function(){
$(".productItem").each(function(){
let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,""));
if(price == 0){
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0
</span>
</div>
</div>
</div>

Jquery check if each element's child exist, change specific element's css

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>

JQuery Live filter for 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.

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.

Re-arrange and remove elements inside a container

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>

Categories

Resources