CODEWITHSUNDEEP
jqueryjquery-selectors
jeremy
jeremy

Reputation: 105

Finding a (sort of parent) id

In the following code :

<div class="dropdown">
                <a href="/Activites" id="menu_item_activites">
                  <span><i class="icon-svg_3_activite"></i>Activités
                  </span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="/Coloriage">Coloriages</a></li>
                    <li><a href="/Activites/Cuisine">Cuisine</a></li>
                    <li><a href="/Activites/Boutique">Boutique</a></li>
                </ul>
            </div>

When clicking on the "Coloriages" link, I would like to retrieve the closest id above, so "menu_item_activites" or the text.

I tried numerous things including : var x = $(this).closest("span").text(); alert(x);

but that return me an empty alert?

Thanks !

Upvotes: 1

Views: 63

Answers (3)

Ajit Singh
Ajit Singh

Reputation: 51

Here is the exact code below,

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

	<script>
		$(document).ready(function(){
			$('.dropdown-menu a').click(function(e){
				e.preventDefault();
				console.log($(this).closest('.dropdown-menu').prev().attr('id'));
			});
		});
	</script>
</head>
<body>
<div class="dropdown">
	<a href="/Activites" id="menu_item_activites">
		<span><i class="icon-svg_3_activite"></i>Activités
		</span>
	</a>
	<ul class="dropdown-menu">
		<li><a href="/Coloriage">Coloriages</a></li>
		<li><a href="/Activites/Cuisine">Cuisine</a></li>
		<li><a href="/Activites/Boutique">Boutique</a></li>
	</ul>
</div>
</body>
</html>

And rest of you can modify it according to your need.

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You may select the element dropdown and then the children anchor:

$('.dropdown-menu').on('click', function(e) {
      e.preventDefault();
      var x = $(this).closest('.dropdown').children('a');
      console.log('ID: ' + x.attr('id') + ' text: ' + x.text().trim());
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="dropdown">
    <a href="/Activites" id="menu_item_activites">
                  <span><i class="icon-svg_3_activite"></i>Activités
                  </span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="/Coloriage">Coloriages</a></li>
        <li><a href="/Activites/Cuisine">Cuisine</a></li>
        <li><a href="/Activites/Boutique">Boutique</a></li>
    </ul>
</div>

Upvotes: 0

mayersdesign
mayersdesign

Reputation: 5310

Here you go. the return false; is only there so that the snippet below doesn't 404 :)

$(".dropdown-menu a").click(function() {
  var x = $(this).parents("div").find("a").attr("id");
  console.log(x);
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <a href="/Activites" id="menu_item_activites">
    <span><i class="icon-svg_3_activite"></i>Activités
                  </span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="/Coloriage">Coloriages</a></li>
    <li><a href="/Activites/Cuisine">Cuisine</a></li>
    <li><a href="/Activites/Boutique">Boutique</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions