When a Div class is clicked, alert it's inner content's Div Class

Question

How do i even put these, let me try. In the following sets of codes, i want to click 'parentclass' and have an alert value of 'child1' and when i click the class below it which is 'Parent 2' have an alert fire with a value of 'child2'

So this must alert the content of that class only and not the entire class.

Here's some Javascript in Jquery.

var childclass = $('.childclass').html();
$('.parentclass').click(function(e) {
    alert (childclass)
});
$('.childclass').click(function(e) {
    e.stopPropagation()
    e.preventDefault()
});

And HTML

<a href="" onClick="return false">
    <div class='parentclass'>
       Parent 1
    <div style="display:none" class="childclass">child1</div>
  </div>
</a>
<a href="" onClick="return false">
    <div class='parentclass'>
      Parent 2
    <div style="display:none" class="childclass">child2</div>
 </div>
</a>

So you want just the first text node of the children within each parent? — SpYk3HH, Nov 27 '13 at 15:50
so clicking the childclass div is supposed to do nothing, but clicking the parentclass div alerts with the child class's content? — joelmdev, Nov 27 '13 at 15:51
not the first text, the entire content of the child inside the parent. — Relm, Nov 27 '13 at 15:52

score 3 · Answer 1 · answered Nov 27 '13 at 15:51

You need to fetch the html of the clicked parent element within the click handler

$('.parentclass').click(function (e) {
    alert($(this).find('.childclass').html())
});
$('.childclass').click(function (e) {
    e.stopPropagation()
    e.preventDefault()
});

Demo: Fiddle

score 3 · Accepted Answer · answered Nov 27 '13 at 15:51

This line var childclass = $('.childclass').html(); doesnt make sense as it doesn't know which element in particular you mean. The result of that will just be child1child2 which is just a concatenation of the .html() of all the elements with class childclass. This is obviously not what you want.

Therefore you should dynamically find the child with a class of childclass upon receiving the click event.

$('.parentclass').click(function(e) {
    alert($(this).find('.childclass').html())
});

Also, you should know that your child class event handler is useless as we don't care if the event gets propogated downwards. If you DID care, then your e.stopPropagation() and e.preventDefault() should be in the event handler of the parent class.

score 1 · Answer 3 · edited May 23 '17 at 11:43

Several ways you can go about this.

First, if your HTML will not be dynamic (elements already exist when page loads), then you can select elements by the parent class name and assign click event as so:

$('.parentclass').click(function(e) {
    //  the first variable here is selecting the inner elements having class 'childclass'
    //  keep in mind, if more than one child having that class is present within this parent, it will select all of them
    var child = $(this).find('.childclass');
    //  here we alert the text of the inner child found
    //      if it is more than one, you will have undesired results. you may want to specify `.first()`
    alert(child.text())
})

For newer jQuery you can also use $('.parentclass').on('click', function(e) {.

If you expect any pieces of parentclass to be dynamic, then you'll want to delegate the event based on either a static parent to the parents or document. This can be like so:

$(document).on('click', '.parentclass', function(e) {
    alert($(this).find('.childclass').text())
})

Or, if you have a static (already there when page loads) wrapping element, give it an ID like `parentClassWrapper' and assign the click event dynamically as:

$('#parentClassWrapper').on('click', '.parentclass', function(e) {
    alert($(this).find('.childclass').text())
})

Some helpful links:

score 0 · Answer 4 · answered Nov 27 '13 at 16:15

I made several adjustments to your html that are worth noting. There's no need for the <a> tag. Don't use inline js - onlick in your html. Note that I wrapped the text inside of the div in the <a> tag instead. This markup is more semantic. Also, move your styles to css rather than in the html.

  <div class="parent">
    <a>Parent 1</a>
    <a class="child">child of parent 1 contents</a>
  </div>
  <div class="parent">
    <a>Parent 2</a>
    <a class="child">child of parent 2 contents</a>
 </div>

css:

.parent > .child { /* good practice: only select an immediate child of the parent */
  display: none;
}

The other answers here are using find() to select the child, but I recommend children() instead. For example, if you had additional nested .childs, find() will select them all, but children() will only select direct .childs of the parent, so it is better in this case. I also recommend using the console for debugging rather than alert.

Live demo here (click).

$('.parent').click(function() {
  var $child = $(this).children('.child');
  var cls = $child.attr('class');
  console.log(cls);
  $child.show(); //added so that you can click the child
});

$('.child').click(function() {
  var html = $(this).html();
  console.log(html);
  //if you just want the text, use this instead:
  var text = $(this).text();
  console.log(text);
});

i put the anchor tag just to change the cursor when it's hovered over this divs since they are not buttons. — Relm, Nov 27 '13 at 19:28
That is not the correct solution. You either should change the whole div to an anchor, or use css `cursor: pointer` on the div. @Eustatia — m59, Nov 27 '13 at 20:44

When a Div class is clicked, alert it's inner content's Div Class

4 Answers4