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

Answer 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> 

Answer 2

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> 

Answer 3

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> 

Answer 4

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>