Filtering with jQuery using data attributes

Developer
Nicky Christensen
Size
2,359 Kb
Views
18,216
  1. Filtering with jQuery using data attributes Previews
  2. Filtering with jQuery using data attributes HTML Codes
  3. Filtering with jQuery using data attributes CSS Codes
  4. Filtering with jQuery using data attributes JS Codes

How do I make an filtering with jquery using data attributes?

Create a filter function with jQuery and data attributes. - Created by nickycdk. What is a filtering with jquery using data attributes? How do you make a filtering with jquery using data attributes? This script and codes were developed by Nicky Christensen on 29 September 2022, Thursday.

Filtering with jQuery using data attributes Previews
IQ Test

Filtering with jQuery using data attributes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Filtering with jQuery using data attributes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Sort News</h2>
<select name="sort-news" id="sort-news">	<option value="All">All news</option>	<option value="Cat1">Category 1</option>	<option value="Cat2">Category 2</option>	<option value="Cat3">Category 3</option>
</select>
<hr />
<section class="news-list"> <article class="news-item" data-category="Cat1">	<div class="thumb">	<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">	</div>	<div class="news-txt">	<h3><a href="">A news title</a></h3>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>	</div>
</article>
<article class="news-item" data-category="Cat2">	<div class="thumb">	<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">	</div>	<div class="news-txt">	<h3><a href="">A news title</a></h3>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>	</div>
</article>
<article class="news-item" data-category="Cat3">	<div class="thumb">	<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">	</div>	<div class="news-txt">	<h3><a href="">A news title</a></h3>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>	</div> </article> </section> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-12/jquery-2.0.3.min_1.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Filtering with jQuery using data attributes - Script Codes CSS Codes

body {	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.news-item { display:inline-block; vertical-align:top; width:300px;}

Filtering with jQuery using data attributes - Script Codes JS Codes

//Filter News
$('select#sort-news').change(function() {	var filter = $(this).val()	filterList(filter);
});
//News filter function
function filterList(value) {	var list = $(".news-list .news-item");	$(list).fadeOut("fast");	if (value == "All") {	$(".news-list").find("article").each(function (i) {	$(this).delay(200).slideDown("fast");	});	} else {	//Notice this *=" <- This means that if the data-category contains multiple options, it will find them	//Ex: data-category="Cat1, Cat2"	$(".news-list").find("article[data-category*=" + value + "]").each(function (i) {	$(this).delay(200).slideDown("fast");	});	}
}
Filtering with jQuery using data attributes - Script Codes
Filtering with jQuery using data attributes - Script Codes
Home Page Home
Developer Nicky Christensen
Username NickyCDK
Uploaded September 29, 2022
Rating 3.5
Size 2,359 Kb
Views 18,216
Do you need developer help for Filtering with jQuery using data attributes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nicky Christensen (NickyCDK) Script Codes
Name
CSS3 Snow Animation
Greyscale image with filter in CSS3
CSS3 Loading Animation
EqualHeight jQuery Plugin
TweenMax scale and rotate animation
Slick Slider Custom Navigation
CSS Animated Tooltip
Animated Navigation with Tweenmax, Sliding Effect
Open Door Effect
Chart JS example with gradient
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!