Question

0

53

Views

How to get the nearest class of separate div in jquery?

On clicking the button I want to get the closest <input name="something/> value.

I tried $(this).closest(".input").val() but didn't work.

$(document).on("click", ".button", function() {
  div = `<div class="second-div"><input name="something/></div>
         <div class="third-div"></div>`
         
  // get nearest <input name="something/> value
  // get nearest <input class="a-input" /> value
  
  $(".main-div").append(div);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
  <div class="second-div">
    <input name="something" class="input" />
  </div>
  <div class="third-div">
    <input name="another input" class="a-input" />
  </div>
  <div class="fourth-div">
    <button type="button" class="button">Click Me</button>
  </div>
</div>

5 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-31T05:50:57.522Z

I would traverse up to the containing div first, then back down to the desired control.

$(this).closest(".main-div").find(".input");

EDIT

I just read your comment saying you want to get the last instance of a class.

$(this).closest(".main-div").find(".input").last();

EXAMPLE

$(document).on("click", ".button", function() {
  div = `<div class="second-div"><input name="something" class="input"/></div>
         <div class="third-div"></div>`
         
  $(".input").removeClass("highlight");
  $(this).closest(".main-div").find(".input").last().addClass("highlight");
  // get nearest <input name="something/> value
  // get nearest <input class="a-input" /> value
  
  $(".main-div").append(div);
});

.highlight{
  background:#b00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
  <div class="second-div">
    <input name="something" class="input" />
  </div>
  <div class="third-div">
    <input name="another input" class="a-input" />
  </div>
  <div class="fourth-div">
    <button type="button" class="button">Click Me</button>
  </div>
</div>