JQuery only one element to be targeted

$("#docord ul li").addClass("whitebg");

The above is targeting all the li, but I want to target the li only where the click is done. I tried first(), eu etc, but none worked. There must be some solution.

Please let me know If I am suppose to provide some additional information too.

It is fair and respectful of the volunteers here to assume that one should supply all of the information and code necessary to demonstrate the problem (as has been mentioned several times) just as we request in SitePoint’s posting guidelines.

Without seeing the HTML and CSS that is being targeted and the context in which they reside all we can do is guess and guessing is a waste of time when actual working code can be provided.

1 Like
<div id="docord">
					<ul class="tpadding">
						<li><a href="#">Home</a></li>
						<li>
							<a >About Us</a><i><svg class="Icon-image rotate" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
							<path d="M12 16c-.3 0-.5-.1-.7-.3l-6-6 1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4-6 6c-.2.2-.4.3-.7.3z"></path>
							</svg></i>
							<ul>
								<li><a href="#">Our History</a></li>
								<li><a href="#">Who We Are</a></li>
								<li><a href="#">Employment &amp; Training</a></li>
							</ul>
						</li>
						<li>
							<a>Products</a><i><svg class="Icon-image" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
							<path d="M12 16c-.3 0-.5-.1-.7-.3l-6-6 1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4-6 6c-.2.2-.4.3-.7.3z"></path>
							</svg></i>
							<ul>
								<li><a href="#">Retail Products</a></li>
								<li><a href="#">Wholesale Products</a></li>
								<li><a href="#">Quality &amp; Food Safety</a></li>
							</ul>
						</li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div><!-- docord -->

JS:

jQuery(document).ready(function($) {
  $("#docord i").click(function() {
    //slide up all the link lists
    $("#docord ul ul").slideUp(200);
    $("#docord i").removeClass("down");
    $("#docord ul li").addClass("whitebg");
    //slide down the link list below the h3 clicked - only if its closed
    if (
      !$(this)
        .next()
        .is(":visible")
    ) {
      $(this)
        .next()
        .slideDown(200);
      $(this).addClass("down");
    }
  });
});

The JS is adding and removing classes to effect changes in the styling of the elements. Would you please add the CSS that styles the HTML elements?

Do you know what a “working page” is? A “working page” is a code-reduced page that we can copy to our computer/s that will demonstrate the problem that you are reporting. If conscientiously prepared, the code will be validated before being posted.

The “working page” will start with <!doctype html>.
It will include the <head> section with working links to needed resources and possibly the CSS if there is no link to an external stylesheet.
It will include the <body> portion with whatever content is needed to frame the page and demonstrate the problem.
Any required JS will be included before the </body> element.
And finally the “working page” will end properly with
</body>
Any required JS will be included before the </body> element.

and we will be able to copy that file to our computer and see the problem just as you see it.

minimal construction of a working page:

<!doctype html>
<html lang="en"> <!-- use appropriate laguage -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css"> <!-- full URL if needed -->
    <title>demo</title>
    <style>
on-page css here
    </style>
</head>
<body>
content here
</body>
</html>

You get extra points if the code is formatted so that it is easily readable.
(indenting with spaces instead of tabs helps bundles) :slight_smile:

The click is on the ‘i’ element so you need to travel up to the closest li parent and apply the class there. Of course you probably want to remove the class from other open menus.

e.g.

 $("#docord ul li").removeClass("whitebg");
 $(this).closest('li').addClass("whitebg")

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.