Why isn't this jQuery selector finding anything?

Question

I have a div inside a div. This inner div has a data attribute. I tried to apply the answer from this question to find the inner div, but am having no luck. What am I doing wrong?

var content = $('#mapElements').find('.mapMarker [data-depotid="b04b4184"]').data('depotguid');

$('#result').text(content);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='mapElements'>
  <div class="mapMarker" data-depotid="b04b4184">This is the text from mapMarker, and if the depotID appears below this text the code works!</div>
</div>

<div id='result'></div>

Answer 1

Wrong Selector for targeting .mapMarker element. Use:

var content = $('#mapElements').find('.mapMarker[data-depotid="b04b4184"]').data('depotguid');
                                             //^space not required here

You can also narrow down the selector for child element to:

var content = $('#mapElements').find('.mapMarker').data('depotguid');

Answer 2

Try this

$(" #mapElements > .mapMarker[data-depotid='b04b4184'] ");

or directly

$(".mapMarker [data-depotid='b04b4184']");