CODEWITHSUNDEEP
jquery
Gilad Adar
Gilad Adar

Reputation: 193

get element by class in nested divs

I need to get with jquery the specific closest message-input text after the class "edit" was clicked.

notice that this code is multiplied so

$(".message-input").text()

is not good for me..

here is the code:

<div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 122

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

What this code says is:

From this clicked .edit element, look for the div before the closest parent div to find .message-input.

$(".edit").on("click",function(){
  var myText = $(this).closest("div").prev("div").find(".message-input").html();
  console.log(myText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

j08691
j08691

Reputation: 207900

Assuming that the structure you posted is repeated, this is one way:

$(".edit").click(function(){
    var text = $(this).closest("div.3").find(".message-input").text()
})

Example:

    $(".edit").click(function(){
        var text = $(this).closest("div.3").find(".message-input").text();
        console.log(text)
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click 1</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div><div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click 2</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div><div class="1">
  <div class="2">
    <div class="3">
      <div class="3a"></div>
      <div class="3b">
        <div class="3b-inner">
        <span>aaa</span>
        <span>aaa</span>
        <p class="message-input">Get this message after click 3</p>
        </div>
      </div>
      <div class="3c">
      <i></i>
      <ul>
        <li class="edit">On click this button</li>
        <li class="delete"></li>
      </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions