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();
I have an unordered list (ul) where each list item (li) has a 'data-pret' attribute. I need to extract the values from the li items that have the class '.selectat' and display them as a total. Example: 10 + 20 + 15 = 45 http://jsfiddl ...
Throughout my web design experience, I have always relied on PHP for the most basic tasks and avoided using the .html extension. One of the main reasons for this was my ability to utilize "PHP Includes" on my website, allowing me to create navigation eleme ...
Here is the outer html of Element1 in CKeditor: <element1 id="s1"> <mytag>Test1</mytag> <span> </span> Some text <mytag>Test</mytag> <span> </span> <mytag>Test3</mytag> some text <span&g ...
I'm having issues with my hover effects not showing: <input type="button" class="button" value="Click"> However, this code works fine: <button class="button">Click</button> The CSS codes are ...
After searching for a cross-browser search control with a clear button similar to HTML5, I found the solution rendered by Chrome: <input type="search> The code that gave me the most relevant results can be found here. I used the standard sample w ...
For tracking Facebook shares on my site, I am currently utilizing jQuery to register each click on the share link. However, I am seeking a more precise method. Rather than just tracking clicks, I want to track the actual "shares". Is there a way to recei ...
I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the bef ...
Hello everyone, After attempting different approaches in numerous ways, I have turned to the experts here who are sure to have the answer to this simple problem. The issue at hand is that when I try to apply background images and other properties to the ...
Any thoughts on why this code is failing? $(document).ready(function () { doAjax("http://somedomain.com/page.aspx"); }); function doAjax(url) { if (url.match('^http')) { $.getJSON("http://query.yahooapis.com/v1/public/yql?" + ...
I'm currently working on a small application that has both a sidebar menu and a header menu. My goal is to have all items in these menus toggle the visibility of content in one main window or page. When a button is clicked, I want it to show the corre ...
Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with: <div id="wrapper"> <div id="content"> ...
I'm new to PHP, jQuery, and AJAX. I'm attempting to integrate the new Google Recapcha. It appears as follows - After Click- And After verified- The code in index.php is as follows- <html> <head> <title>Google reCAPTCHA ...
I am in need of assistance to implement an accordion menu with unique picture icons for each item on the left and a toggle icon (such as + or a chevron) on the right side. Visually, I would like it to resemble this design (https://codepen.io/kathykato/pen ...
I am currently using a test web service named MySimpleService.svc which includes a method called GetUserNamesByInitials. Below is the Linq to SQL code snippet: [OperationContract] public static string GetUserNamesByInitials(string initials) { s ...
One question that is frequently asked, but I have yet to find a solution for, is how to create a JSON body from a form in which the quotes are placed around the property names rather than the values. The desired JSON body should look like this: { "salary1 ...
Typically, the code margin:auto is used for centering, but I have a different code below. HTML : <article> <header></header> </article> CSS: article{ max-width: 500px; margin: auto; /* centered - nice */ } header{ width: ...
Is there a way to make an HTML element visible at all times, not just on focus? It seems like it should be as easy as this: HTML: <img src="image.png" width="100" height="100" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circl ...
Can anyone help me create a social media sidebar that stays fixed on the bottom right side of the screen, regardless of its size? Currently, the sidebar moves when I scroll down, but I want it to remain in place. How can I achieve this fixed positioning? ...
http://jsfiddle.net/e8B9j/2/ HTML <div class="box" style="width:700px">This is a sentence</div> <div class="box" style="width:600px">This is a sentence</div> <div class="box" style="width:500px">This is a sentence</div> ...
Looking to create flexible columns and rows with borders on the left and right of each column. If one row in a column stretches more, the other columns in that row should also stretch accordingly. Came across liquid 2 column layouts and 3 column layouts, b ...