What is the best way to modify the CSS of a child element within the context of "$(this)"

On my search results page, each result has an icon to add it to a group. The groups are listed in a hidden UL element on the page with display:none.

The issue I'm facing is that when I click on the icon for one result, the UL appears under every single result instead of just the one I clicked on.

I need the UL to only show up for the specific result listing that I am clicking the icon on, not all of them.

This is the current onload code:

$("a.quicklist, a[href=#newgrp]").toggle(
    function(){
        $("ul.quicklist_menu").css('display','block');  
        $(this).addClass("current");
    },
    function(){
        $("ul.quicklist_menu").css('display','none');
        $(this).removeClass("current");
});

I attempted to modify it to this:

$("a.quicklist, a[href=#newgrp]").toggle(
    function(){
        $(this).children("ul.quicklist_menu").css('display','block');   
        $(this).addClass("current");
    },
    function(){
        $(this).children("ul.quicklist_menu").css('display','none');    
        $(this).removeClass("current");
});

However, the icon is highlighted as "current" or active but the UL does not appear.

Any help on this would be highly appreciated.

Apologies! Here is the HTML:

<li class='vcard'>
    <a href='profile.php?id=1288'><img class='user-photo' src='profile_images/sq_avatar.png' alt='Paul Dietzel' /></a>
    <div class='user-info'>
        <a class='fn url name' href='profile.php?id=1288'>Paul Dietzel</a>
        <ul class='attributes'>
            <li class='adr'><span class='locality'>Los Angeles</span>, <abbr class='region' title='California'>CA</abbr></li>
        </ul>
    </div>
    <ul class='options'>
        <li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
        <li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
        <li><a class='add-to-group' href='#newgrp'>Add to group</a></li>
        <ul class="quicklist_menu"><li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
            <li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
            <li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
            <li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
            <li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
            <li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
            <li class="mgrp"><a href="groups.php#newgrp">Manage Groups &raquo;</a></li>
        </ul>
    </ul>
</li>
javascriptjquerycssthischildren

Answer №1

It is important to adjust your markup for proper structure by ensuring that the <ul> element is a sibling of the anchor, not positioned outside the <li></li>, but rather inside. Placing a <ul> as a child of another <ul> is considered invalid HTML. Here's how you can correct it:

<ul class='options'>
  <li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
  <li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
  <li><a class='add-to-group' href='#newgrp'>Add to group</a>
    <ul class="quicklist_menu">
      <li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
      <li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
      <li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
      <li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
      <li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
      <li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
      <li class="mgrp"><a href="groups.php#newgrp">Manage Groups &raquo;</a></li>
    </ul>
  </li>
</ul>

With this corrected structure, you can utilize .next() method in jQuery as shown below:

$("a.quicklist, a[href=#newgrp]").toggle(
    function(){
        $(this).addClass("current").next("ul.quicklist_menu").show();  
    },
    function(){
        $(this).removeClass("current").next("ul.quicklist_menu").hide();
});

This code snippet makes use of .show() and .hide() methods for displaying or hiding content. Alternatively, you can achieve a toggle effect using .click() with .toggleClass() and .toggle() like so:

$("a.quicklist, a[href=#newgrp]").click(function() {
  $(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});

Answer №2

Employ the combination of .closest() and .next()

$("a.quicklist, a[href=#newgrp]").toggle(
    function(){
        $(this).closest('li').next("ul.quicklist_menu").css('display','block');   
        $(this).addClass("current");
    },
    function(){
        $(this).closest('li').next("ul.quicklist_menu").css('display','none');    
        $(this).removeClass("current");
});

Alternatively, you can give this a shot,

$("a.quicklist, a[href=#newgrp]").toggle(
    function(){
        $(this).addClass("current")
            .closest('ul.options')
            .children("ul.quicklist_menu")
            .css('display','block');
    },
    function(){
        $(this).removeClass("current")
            .closest('ul.options')
            .children("ul.quicklist_menu")
            .css('display','none');    
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What advantages does withStyles offer that surpasses makeStyles?

Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles? ...

cssreactjsmaterial-ui

Uploading files using Angular can result in a null HttpPostedFileBase

When working with Angular in conjunction with MVC, I am facing an issue where the HttpPostedFileBase is coming up as null when attempting to upload a file. This is how the HTML looks: <input type="file" data-ng-model="fileName" onchange="angular.eleme ...

c#javascriptasp.net-mvcangularjs

Determine the character count of the text within an *ngFor loop

I am a beginner in Angular (8) and I am trying to determine the length of the input value that I have created using a *ngFor loop as shown below: <div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id"> & ...

javascriptangulartypescriptangular-reactive-formsangular8

Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall. Attempts to style the div itself have been partially successful, b ...

javascriptcssreactjsmaterial-ui

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

Ensure that Bootstrap collapse is opened on desktop devices but closed on mobile devices

Is there a way to make a collapse open on desktop and closed on mobile using only Bootstrap? On Desktop: https://i.sstatic.net/IwHCv.png On Mobile: Here, the content should only be displayed when you click on the title of each group https://i.sstatic.n ...

htmlcssbootstrap-5

Mock needed assistance

In my testing scenario, I am attempting to simulate a service that is utilized by my function using sinon. However, I am encountering difficulties in inserting the mock into my function. The service is obtained through the use of require The structure of ...

javascriptnode.jsunit-testingmockingsinon

What is the best way to activate a component within Angular 2 that triggers the display of another component through method invocation?

I have created a popup component that can be shown and hidden by calling specific methods that manipulate the back and front variables associated with the class. hide() { this.back = this.back.replace(/[ ]?shown/, ""); this.front = this.front.replace( ...

javascriptangular

Eliminate an item from an array of objects utilizing a specific key

Here is the JSON data provided: var data= { 'A' : { 'Total' : 123, 'Cricket' : 76, 'Football' : 12, 'Hockey' : 1, 'None' : 10 }, 'B&ap ...

javascriptjqueryjsonobjectkey-value

When working with React and trying to update data using the useEffect hook, I encountered an issue with an Array data. Unfortunately, using map or Object.keys(data).map did not produce the desired results. Can anyone provide guidance on

After using the useEffect hook to update the data, I noticed that the data is an array when inspected in the DEV tools. However, when attempting to traverse the data using the map function, an error stating 'data.map is not a function' is returne ...

javascriptreactjsreact-hooks

Utilize Jquery to easily interact with RadComboBoxes

Is there a way to capture all RadComboBoxes change events in JQUERY for ASP.NET? $("input[type='text']").Change(function() { alert('changed'); }); In this example, I am specifying the input type as "text" because RadComboBoxes hav ...

javascriptjqueryasp.net

Encountering a node.js issue

Hi there, I keep encountering this error message. Can someone explain what it means? I'm not very skilled in coding, so I would appreciate any assistance :) Best regards logon fail: 65, sessionID: 6343803 events.js:85 throw er; // Unhandled & ...

javascriptnode.js

What is the best way to set multiple headers and change the content type when needed?

I am struggling with a function that cannot be overridden: getHtml:function(aURL,aPostData,aHeaders,aMethod){ this.xhr = new XMLHttpRequest(); var tmp=this; this.xhr.onreadystatechange=function(){ tmp.onStateChange(); }; if(aPo ...

javascriptarraysfunction

Guide to incorporating the content of a div into an image source using PHP

In extracting a value from an HTML table, I encountered this syntax: $('table#showalluporders tbody tr').click(function() { var tableData = $(this).closest("tr").children("td").map(function() { return $(this).text(); }).get(); $(' ...

phpjqueryhtmlcss

A more concise code for dynamically changing content using if-else conditions

I have a dataLayer created by a specific system and I am looking for a more efficient way to change the content of my webpage based on values in the dataLayer. Currently, I have implemented a conditional if else statement using jQuery which does work, bu ...

jquery

Is there a way to eliminate the white background or border on my Font Awesome checkbox?

One issue I'm encountering with Font Awesome 5 is that, when I click on my checkbox, there is an unwanted white background or border that I can't seem to get rid of. /* Updating default snippet color for better visibility of the issue */ body ...

htmlcssfont-awesomefont-awesome-5

Codeigniter is causing issues when trying to submit a jQuery POST request while CSRF protection is

I've encountered an issue while trying to POST to a Codeigniter controller with CSRF protection enabled. The request keeps failing, resulting in HTTP/1.1 500 Internal Server Error and displaying a message saying "This action is not allowed". I attemp ...

phpjqueryajaxcodeigniter

A step-by-step guide on incorporating box-shadow for the jackColor in the Switchery Plugin

I am looking to add a box shadow to my iOS7 style switches for checkboxes when they are checked. Here is the code I have so far: var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function (html) { va ...

javascriptcssjquery-plugins

View the image without needing to upload it

Can you display an image from an input type="file" on a page without actually uploading it to the server? Is there a way to copy the image into a location that the script can access in order to achieve this? It doesn't matter if it loads after a refr ...

jqueryajax

Set each item to its original position on the draggable container

I am working on a project where I have categories with lists of contacts. Each contact has user details displayed in a table with input elements. I have made the contacts draggable and the categories droppable. When moving a contact from one category to an ...

jquerydraggabledroppableeach