I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
I think the problem is with your CSS selector in the Jquery.
$('.item .item-location p')
should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.
Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item, you've to use closest to reach the ancestor .item
$("#location-filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('.item .item-location p').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('.item').hide();
} else {
$(this).closest('.item').show();
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
Related
What i would want is to display, say, 10 job list, and then for the rest of them to have a "Load More" button or something like function.
Please see the script bellow:
<!-- Listings -->
<div class="title-bordered">
<h2>Our Professionals <small>Latest added</small></h2>
</div>
<div class="job_listings">
<ul class="job_listings">
<li class="job_listing">
<a href="#">
<div class="job_img">
<img src="images/samples/person1.jpg" alt="" class="company_logo">
</div>
<div class="position">
<h3>Debbie Bidart</h3>
<div class="company">
<strong>Paint Removal from Exterior or Interior Surfaces</strong>
</div>
</div>
<div class="location">
<i class="fa fa-location-arrow"></i> Melbourne, AU
</div>
<div class="rating">
<div class="rating-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="reviews-num">12 Reviews</div>
</div>
<ul class="meta">
<li class="job-type">Painting</li>
<li class="date">
Posted 1 month ago
</li>
</ul>
</a>
</li>
<div class="spacer"></div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<a class="btn btn-default btn-block" href="#">View All Professionals</a>
</div>
</div>
<!-- Listings / End -->
I need that functionality implemented there. I'm assuming it should not be hard to do, but, I'm not sure what i'm doing.
I Hope someone can help. Thankx.
I have a group of spans in a div that I'm try to match and move to a corresponding id.
Each span has a data attribute that matches the parent ID of the target. I'm trying to use jQuery to match the data attributes in the spans and then append them before a separate span in the parent div ID's.
Here's my code:
HTML
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span>Title 3</span>
</div>
</a>
</div>
<div class="vid-imgs">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>
Basically, each span that is in the vid-imgs class with the data-item would match to the ID of the parent divs and then do an .append() right after the item-title class.
So the intended output would be something like this:
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 3</span>
</div>
</a>
</div>
I'm not sure how to match each of those overall.
I was thinking of using each like this:
$(".vid-imgs").each(function () {
var items = $(".item").attr("data-item");
console.log(items);
});
But that only seems to grab the first item in the vid-imgs div. I feel like I've done this before, but I've been starting at this thing all day, and I think I need to give my eyes a break.
Few things:
$(".item").attr("data-item"); is getting the value of the data-item attribute of the .item. If you want to select the item with a specific id, you can use the CSS id selector
You should be looping through the spans inside .vid-imgs, not .vid-imgs itself
$(".vid-imgs span").each(function () {
var items = $("div#"+$(this).data('item'))
items.append(this.cloneNode(true))
this.remove() //remove the span
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span>Title 3</span>
</div>
</a>
</div>
<div class="vid-imgs">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>
I want to be able to remove a div at the click of a button, the div is a card in bootstrap
this is the div:
$("button").click(function () {
$(this).parent().closest('div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream" />
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
I want to delete this div when I click the button.
Thanks in advance.
There is a jquery parents() which will find the parent element by passing any selector it will find that element. So here in your example you have to pass class name .col-md-4 OR .card by that selector you can perform any action
$("button").click(function () {
$(this).parents(".col-md-4").hide();
});
.col-md-4{border:1px red solid
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
Use jQuery#parents method and give the selector which you want to hide.
If you want to remove the content instead of hide, use
For remove
$(this).parents('.col-md-4.col-xs-4').parent().empty();
For hide
$(this).parents('.col-md-4.col-xs-4').hide();
Code
$("button").click(function () {
$(this).parents('.col-md-4.col-xs-4').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream">
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix">
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i><span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i> <span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
Here you go with a solution
$("button").click(function () {
$(this).closest('div[class="col-md-4 col-xs-4"]').slideUp("slow", function(){
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-xs-4">
<div class="card" >
<img class="card-img-top" src="img/cheesecake-cream.jpg" alt="Chocolate cream" />
<div class="card-body">
<h4 class="card-title">Chocolate cream</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-body clearfix" >
<div class="text-left text-success float-left">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Edit</span>
</div>
<div class="text-right text-danger float-right">
<i class="fa fa-trash" aria-hidden="true"></i>
<span id='clickableAwesomeFont'> Delete</span>
<button>Remove</button>
</div>
</div>
</div>
</div>
I've used jQuery closest method to get the div and slideUp instead of hide to get the animation.
After slideUp completes it will remove the div (it's a callback).
Hope this will help you.
parent only goes one level up. You should use closest:
$("button").click(function () {
$(this).closest('div.col-md-4.col-xs-4').remove();
});
$("button").click(function () {
$(this).parent('div.card').hide();
});
I tried many thigs to navigate to next div element I'm using Mousetrap for key listener and checking if there is selected item then I'm trying to find the next div but seems like can't find anything any ideas?
HTML (There are many of this div item):
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
Javascript
Mousetrap.bind("right", function() {
if($('.item-flip selected').length){
var current = $('.item-flip selected');
$('.selected').removeClass('selected');
var el = current.next();
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
I tried how to figure out a solution, in the following my snippet the code.
The points of interest are:
To select an element with two classes you need to change from $('.item-flip selected') to $('.item-flip.selected')
To get next element you need to find the clossest div father and then search for the item-flip div. So from var el = current.next(); you need to change to: var el = current.closest('.item').next().find('.item-flip');
$(function () {
Mousetrap.bind("right", function(e) {
if($('.item-flip.selected').length){
var current = $('.item-flip.selected');
$('.selected').removeClass('selected');
var el = current.closest('.item').next().find('.item-flip');
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
});
.selected {
background-color: red;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
I have some content boxes in my page and I need to toggle some contents under these content boxes.
My content boxes look like this:
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt=""/>
</a>
</figure>
<div class="event">
<p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ---- </p>
</div>
</div>
</div>
What I need is when user click on .readmore I want to toggle .more-info DIV. This is how I tried it. but its only toggling contents in first content box.
$(".readmore").click(function() {
$(".more_info").animate({ opacity: 1.0 },200).slideToggle(500, function() {
$(".readmore").html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Can anybody tell how to modify this code?
Fiddle
Check this out:
$(".readmore").click(function () {
var $this = $(this);
$this.parent().siblings(".more-info").slideToggle().promise().done(function () {
$this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Or simply
$(".readmore").click(function () {
var $this = $(this);
$this.parent().siblings(".more-info").slideToggle(function () {
$this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
});
});
Fiddle
$(".readmore").click(function() {
var txt = $(this).parent().next(".more-info").is(':visible') ? "Read More" : "hide";
console.log(txt);
$(this).text(txt).parent().siblings(".more-info").slideToggle()
});
.more-info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>
<div class="package">
<div class="banner-wrap">
<figure class="featured-thumbnail">
<a href="#">
<img src="img/packages/package1.png" alt="" />
</a>
</figure>
<div class="event">
<p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>
</p>
</div>
<div class="more-info">
<p>----- this is my toggling contents ----</p>
</div>
</div>
</div>