jQuery closest selector is not working and scroll & focus to a class

Question

My html code is

  <div class="main">
      <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

So i want to change color of text in select box when .tst clicked .

so i write code

$(".main .tst").on("click",function(){

        $(this).closest(".main > select").css("color","red");

        });

but it is not working .

Also when i click on the link then the page is scrolling up to the top .

How can i change the scrolling to select element .

Please help

This is not how [`.closest()`](https://api.jquery.com/closest/) works. It finds an ancestor of the current element, that select is not an ancestor of `.tst`. — Jeto, Mar 25 '19 at 07:51
Maybe a button or 'e.preventDefault()` as per https://stackoverflow.com/questions/8260546/make-a-html-link-that-does-nothing-literally-nothing will provide your desired behavior. — DaveStSomeWhere, Mar 25 '19 at 08:09

User863 · Answer 1 · 2019-03-25T07:53:40.790

1

Try using parents() jquery method

$(document).ready(function() {
  $(".main .tst").on("click", function() {
    $(this).parents(".main").find("select").css("color", "red");
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

edited Mar 25 '19 at 07:53

answered Mar 25 '19 at 07:51

User863

19,346
2
17
41

Thank you . Could you please check the scroll effect also – Jafar tm Mar 25 '19 at 07:52
1

`$(this).closest(".main")` is more optimal. Also please don't just post answers with pure code, explain the difference and what was wrong in the original if you can. – Jeto Mar 25 '19 at 07:52

Hien Nguyen · Accepted Answer · 2019-03-25T07:58:48.633

1

You can use $(this).closest(".main").find('select').css("color","red");

You can add id = test for select tag and update href for a tag $(this).attr('href', '#test');

$(".main .tst").on("click",function(){

        $(this).closest(".main").find('select').css("color","red");
        $(this).attr('href', '#test');
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Test</h1>
<div class="main">
      <div class="sub-1">
    <select id="test">
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

edited Mar 25 '19 at 07:58

answered Mar 25 '19 at 07:52

Hien Nguyen

24,551
7
52
62

Thank you . Could you please check the scroll effect also – Jafar tm Mar 25 '19 at 07:55
you can add id for select tag and update href for a tag – Hien Nguyen Mar 25 '19 at 07:59

score 1 · Answer 3 · answered Mar 25 '19 at 08:00

closest will not look in to the child but it will select the parent then use find to select the select tag

$(".tst").on("click", function() {
  $(this).closest(".main").find('select').css("color", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="#" class="tst">Hi</a>

  </div>

</div>

Mukyuu · Answer 4 · 2019-03-29T04:00:45.963

As the other explain you could use either .parents() or closest().

Note that using either:

$(this).parents(".main").find("select").css("color", "red");

or

$(this).closest(".main").find('select').css("color", "red");

would target all select.

The reason why when you click the link got scrolled to the top because you set href="#" replacing with href="javascript:void(0)" would solve the issue. See here for more explanation: Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?

Adding more detailed selector would prevent targetting all select element: For selecting which element if you only had one you could use .first() if you had more than one and possibly more :nth-child(x) where x is the index of your element.

To scroll and focus to select you can use .focus(). To smoothen the focus you could use .animate:

$('html,body').animate({
        scrollTop: $("select").first().offset().top
    }, 'slow');
$("select").first().focus();

See the following snippet:

$(document).ready(function() {
  $(".main .tst").on("click", function() {
    //$(this).parents(".main").find("select").first().css("color", "red");
    $(this).closest(".main").find('select').first().css("color", "red"); // removing first() would target all select element
  });
  $(".main .tfse").on("click", function() {
    //$(this).parents(".main").find("select").first().css("color", "green");
    $(this).closest(".main").find('select').first().css("color", "green"); // removing first() would target all select element
    $("select").first().focus();
  });
  $(".main .tfsa").on("click", function() {
    //$(this).parents(".main").find("select").first().css("color", "orange");
    $(this).closest(".main").find('select').first().css("color", "orange"); // removing first() would target all select element
    $('html,body').animate({
      scrollTop: $("select").first().offset().top
    }, 'slow');
    $("select").first().focus();
  });
  $(".main .tise").on("click", function() {
    //$(this).parents(".main").find("select:nth-child(2)").css("color", "blue");
    $(this).closest(".main").find('select:nth-child(2)').css("color", "blue");
    $('html,body').animate({
      scrollTop: $("select:nth-child(2)").offset().top
    }, 'slow');
    $("select:nth-child(2)").focus();
  });
})

.sub-2{
  margin-top:1600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub-1">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>

  <div class="sub-2">
    <a href="javascript:void(0)" class="tst">Only affect but not focus (red, first)</a><br/>
    <a href="javascript:void(0)" class="tfse">Target and focus select element (green, first)</a><br/>
    <a href="javascript:void(0)" class="tfsa">Target, animate scroll and focus select element (orange, first)</a><br/>
    <a href="javascript:void(0)" class="tise">Target, animate scroll and focus select element based on your selected index - this example target second -> :nth-child(2) (blue, second)</a>
  </div>

</div>

jQuery closest selector is not working and scroll & focus to a class

4 Answers4