Find and focus first element with jquery

Question

This is my bootstrap tab and I have two different elements are: .nav-tabs and .tab-content and I want to focus first element if my ul li aria-controls attribute and my tab-content id is match/same

 $(function() { var tabMenuLink = $(".nav-tabs li a"); tabMenuLink.on("click", function() { tabId = $(this).attr("aria-controls"); alert(tabId); }); }); 

 .box { width: 700px; margin: 100px auto; } ul li { padding: 10px; } .tab-content { padding: 10px; } 

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <div class="box"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#otel-ara" aria-controls="otel-ara" role="tab" data-toggle="tab" class="otel-ara-tab">OTEL</a></li> <li role="presentation"><a href="#tur-ara" aria-controls="tur-ara" role="tab" data-toggle="tab" class="tur-ara-tab">TUR</a></li> <li role="presentation"><a href="#ucak-ara" aria-controls="ucak-ara" role="tab" data-toggle="tab" class="ucak-ara-tab">UÇAK</a></li> <li role="presentation"><a href="#gemi-ara" aria-controls="gemi-ara" role="tab" data-toggle="tab" class="gemi-ara-tab">GEMİ</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="otel-ara"> <input type="text" placeholder="otel first input"> <input type="text" placeholder="otel second input"> </div> <div role="tabpanel" class="tab-pane" id="tur-ara"> <input type="text" placeholder="tur first input"> <input type="text" placeholder="tur second input"> </div> <div role="tabpanel" class="tab-pane" id="gemi-ara"> <input type="text" placeholder="gemi first input"> <input type="text" placeholder="gemi second input"> </div> <div role="tabpanel" class="tab-pane" id="ucak-ara"> <input type="text" placeholder="uçak first input"> <input type="text" placeholder="uçak second input"> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> 

Answer 1

You can use :data selector and first() method

jQuery("ul li:data(aria-controls)").first().val()

For :data selector you need use JqueryUi selector

Without JqueryUI

 jQuery("ul li").find('[aria-controls]').first().val()

Answer 2

You can use .focus() jQuery method to focus first input inside selected .tab-content

$(function() {
    var tabMenuLink = $(".nav-tabs li a");
    tabMenuLink.on("click", function() {
        tabId = $(this).prop("aria-controls");
        var selectedTab = $("#"+tabId);
        selectedTab.find('input').first().focus();
    });
});

Answer 3

Try this:

$(function() {

  var tabMenuLink = $(".nav-tabs li a");

  tabMenuLink.on("click", function() {
    var tabId = $(this).attr("aria-controls");

    $(".tab-pane").removeClass("active");
    $("#"+tabID).addClass("active");
    $("#"+tabID).find("input").filter(':visible:first').focus();
  });

});

Answer 4

You can use

$('.tab-pane').hide(0);
$('#'+tabId).show(0);
$('#'+tabId).find('input:first').focus();

Working Demo

 $(function() { var tabMenuLink = $(".nav-tabs li a"); tabMenuLink.on("click", function() { tabId = $(this).attr("aria-controls"); $('.tab-pane').hide(0); $('#'+tabId).show(0); $('#'+tabId).find('input:first').focus(); }); }); 

 .box { width: 700px; margin: 100px auto; } ul li { padding: 10px; } .tab-content { padding: 10px; } 

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' > <div class="box"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#otel-ara" aria-controls="otel-ara" role="tab" data-toggle="tab" class="otel-ara-tab">OTEL</a></li> <li role="presentation"><a href="#tur-ara" aria-controls="tur-ara" role="tab" data-toggle="tab" class="tur-ara-tab">TUR</a></li> <li role="presentation"><a href="#ucak-ara" aria-controls="ucak-ara" role="tab" data-toggle="tab" class="ucak-ara-tab">UÇAK</a></li> <li role="presentation"><a href="#gemi-ara" aria-controls="gemi-ara" role="tab" data-toggle="tab" class="gemi-ara-tab">GEMİ</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="otel-ara"> <input type="text" placeholder="otel first input"> <input type="text" placeholder="otel second input"> </div> <div role="tabpanel" class="tab-pane" id="tur-ara"> <input type="text" placeholder="tur first input"> <input type="text" placeholder="tur second input"> </div> <div role="tabpanel" class="tab-pane" id="gemi-ara"> <input type="text" placeholder="gemi first input"> <input type="text" placeholder="gemi second input"> </div> <div role="tabpanel" class="tab-pane" id="ucak-ara"> <input type="text" placeholder="uçak first input"> <input type="text" placeholder="uçak second input"> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>