Is there a way for me to run jquery functions on a child of an element?

Question

I'm totally new to jQuery so I might've missed something here. Let's say the html looks something like this:

<div class = "parent">
  <div class = "child">
    <div class = "message">
      text
    </div>
  </div>
  <div class = "child">
    <div class = "message">
      text
    </div>
    <div class = "message">
      text
    </div>
    <div class = "message">
      text
    </div>
  </div>
  <div class = "child">
    <div class = "message">
      text
    </div>
    <div class = "message">
      text
    </div>
  </div>
</div>

I'd like to be able to access each "message" div within the scope of the "child" div, instead of just using this to iterate through each "message" class element:

$('.message').each(function(index, e) {});

I understand that I can get each jquery object using this, but want to then filter through using the code above to get each text within the scope of its parent class.

var message = $('.child');

score 1 · Answer 1 · answered Jul 02 '16 at 01:47

Use $(PARENT CHILD) selector(Space in between them)

console.log($('.child .message').get())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <div class="message">
      text
    </div>
  </div>
  <div class="child">
    <div class="message">
      text
    </div>
    <div class="message">
      text
    </div>
    <div class="message">
      text
    </div>
  </div>
  <div class="child">
    <div class="message">
      text
    </div>
    <div class="message">
      text
    </div>
  </div>
</div>

Is there a way for me to run jquery functions on a child of an element?

1 Answers1