JQuery selector returns undefined

Question

This html code was generated of my php code, but I copied this out of the HTML code of the browser.

The console.log prints out undefined. I don't know why. It's probably a really dumb mistake, like always. Thank you for your help.

$('.show').click(function() {
  var id = $(this).attr('id');
  var div = $("div#" + id);
  console.log(div.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Heading <a href='#' class='show' id='2962'>+</a></h3>
<div class='.slidetoggle' id='2962' style='display: none;'>
  <p>Test!</p>
</div>

Rory McCrossan · Accepted Answer · 2017-07-05T23:02:01.103

6

It's because the .show element is an a, not a div. The selector is wrong:

var div = $("a#" + id);

Update:

You are right, but I want to show the div, not the a

In this case you need to use DOM traversal to find the relevant element. Your current code doesn't work as you have duplicate id attributes. This is invalid as they must be unique. Try this:

$('.show').click(function() {
  $(this).closest('h3').next('.slidetoggle').slideToggle();
});

.slidetoggle { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Heading <a href="#" class="show">+</a></h3>
<div class="slidetoggle">
  <p>Test!</p>
</div>

<h3>Another Heading <a href="#" class="show">+</a></h3>
<div class="slidetoggle">
  <p>Another Test!</p>
</div>

edited Jul 05 '17 at 23:02

answered Jul 05 '17 at 22:57

Rory McCrossan

331,213
40
305
339

You are right, but I want to show the div, not the a – phil Jul 05 '17 at 22:58
What do you mean 'show the div'? Do you mean you want to geth the HTML of the following div element? – Rory McCrossan Jul 05 '17 at 22:59
Exactly. The div has the style 'display: none;' because I want to show/hide it with the click() method. – phil Jul 05 '17 at 23:01
@RoryMcCrossan There is duplicate IDs. There is an `a` and a `div` that shares the same ID. So technically `("div#" + id)` is correct. The problem is that the ID starts with a digit. – ibrahim mahrir Jul 05 '17 at 23:01
Thank you @RoryMcCrossan! Saved my evening! – phil Jul 05 '17 at 23:06

score 1 · Answer 2 · answered Jul 05 '17 at 23:00

1

I don't have the reputation to comment yet so I will have to give it as an answer, but the element you want is an nchor but your jQuery selector is targeting a element.

answered Jul 05 '17 at 23:00

Jeremy Myers

159
6

JQuery selector returns undefined

2 Answers2