I have a code snippet that I need help with. You can view the code here.
$("#filters :checkbox").change(function() {
$(".listing-details > div").hide();
$("#filters :checkbox:checked").each(function() {
$(".listing-details ." + $(this).val()).show();
});
});
My issue is that instead of hiding the .listing-details css class, I want to hide the div elements that start with .wpbdp-listing.
Any suggestions on how I could achieve this?
Thanks in advance.
Organizing code into separate functions for better readability and accessibility can greatly improve the efficiency of a program. By creating a single function that can be easily called multiple times, we can ensure that our code is reusable and responsive to different events.
ToggleThings();
$("#filters :checkbox").change(function() {
ToggleThings();
});
function ToggleThings()
{
$(".wpbdp-listing").hide();
$("#filters :checkbox:checked").each(function() {
$('.' + $(this).val()).closest('.wpbdp-listing').show();
});
}
http://jsfiddle.net/p9s0pdao/1/
Update (final solution):
ToggleThings();
$("#filters :checkbox").change(function() {
ToggleThings();
});
function ToggleThings()
{
var checkedboxes = $("#filters :checkbox:checked");
if (checkedboxes.length > 0)
{
$(".wpbdp-listing:visible").hide();
checkedboxes.each(function() {
$('.' + $(this).val()).closest('.wpbdp-listing').show();
});
}
else
{
$(".wpbdp-listing").show();
}
}
If you need to find the parent node no matter how deep it is, consider using the .closest() method in jQuery.
$(".element-container > span").closest('.parent-element').show()
For more information, check out the documentation here.
Check out this code snippet and give it a try on JsFiddle
$(".wpbdp-listing").hide()
$("#filters :checkbox").change(function() {
$(".listing-details ." + $(this).val()).parents('.wpbdp-listing').hide();
$("#filters :checkbox:checked").each(function() {
$(".listing-details ." + $(this).val()).parents('.wpbdp-listing').show();
});
});
I included the line " $(".wpbdp-listing").hide()" to initially hide the divs since the checkboxes are unchecked by default. Alternatively, you can set the checkboxes as checked by default and remove that line of code.
One way to access the parent element of a specific element using JQuery is by utilizing the .parent() method.
To hide the parent element of an element with the class "listing-details", you can use the following code:
$(".listing-details").parent().hide();
In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...
I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle: HTML: <div class="menu-fixed">I am a fixed me ...
Here is the JSON data that has been returned: ({"Data":{"Alabama":"AL","Alaska":"AK","Arizona":"AZ","Arkansas":"AR","California":"CA","Colorado":"CO","Connecticutt":"CT","Delaware":"DE","Florida":"FL","Georgia":"GA","Hawaii":"HI","Idaho":"ID","Illinois":" ...
On my photo portfolio admin page, I have created a feature to caption, keyword, and credit each photo. Previously, I had multiple forms listed dynamically with submit buttons for each form. With over 20 photos/forms on the page, this process became tedious ...
Are you new to coding? I'm looking for help on linking thumbnail images to a swiper so that when a thumbnail is clicked, it moves the swiper-container to the corresponding slide. Any ideas or suggestions would be greatly appreciated! Here's an e ...
Is there a way to save visited pages in jQuery cookies as an array? I'm wondering if it's better to use jQuery cookie or session for this, but I've noticed that using session still restores the session when I open Firefox. How can I accompli ...
I currently have several divs displayed on my website. <div class="slide bx-clone"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide bx-clone"></div> <div class="slide bx-clone" ...
In this situation, I have checkboxes next to each field on the page that are being replaced with "Delete" text using jQuery on page load. It works well like this: $(".profile-status-box").each(function(){ $(this).replaceWith('<span class="delete"& ...
Encountering an issue on my Wordpress website where admin_init is being called twice has been quite a headache. After deactivating all plugins, I managed to pinpoint the culprit plugin that was causing the problem. Now my dilemma is how to determine the ...
Is there a way to reload a specific div container without using ajax when the client requests it? I attempted to refresh the page with the following code: $('li.status-item a').click(function() { window.location.href=window.location.href; ...
As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. ...
I am encountering an issue with two radio buttons that I am trying to link together. The problem arises because they are located in two separate form elements, causing them not to function as intended. It is important for the forms to be utilized in Bootst ...
This code isn't functioning properly as it displays the three horizontal bar button, but nothing happens when clicked. bootstrap-3.3 jquery-1.1 Toggle navigation CopyHere <div class="collap ...
<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...
In my MVC project, I am utilizing jQuery to set up keyboard shortcuts for saving, canceling, and adding new items. The shortcut keys I have implemented are Alt+S, Alt+C, Alt+S. While these shortcuts work fine on Chrome, there seems to be an issue with the ...
Looking to trigger a function only on the initial interaction with the DOM. Are there any vanilla JavaScript options available? I've brainstormed this approach. Is it on track? window.addEventListener("click", function onFirstTouch() { console.l ...
I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...
I have a table of contents in my HTML page with the CSS attribute position: fixed;. I want to emphasize the current reading position by highlighting it (bold or italics) as I scroll down the page. | yada yada yada ... 1. Secti ...
I have a large table with multiple HTML elements such as dropdowns, textboxes, radio buttons, and checkboxes. Additionally, I have a function that I want to execute whenever any of these items change. Whether it's a selection from a dropdown, typing i ...
I have a modal popup that is not consistently displayed in the center of the screen, regardless of the scrollbar position. I always want it to render at the center so the user doesn't need to scroll to see it. Below is the code I am currently using: ...