How to select a class of an id in jquery

jquery get element by class
jquery get element by id
jquery get element by id value
jquery get child element by class
jquery id class selector
jquery selector
jquery get element by id variable
jquery this

I have two div with different id but same class how do I select a class of a given id ?

$(function() {
      $('#1').find('.select').click(function() {

        alert("1 clicked ");

      });
      $("#2 .select").click(function() {

        alert("2 clicked ");

      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
    <button class="select">one</button>
</div>

<div id="2">
    <button class="select">two</button>
</div>

Your first Div is missing a Closing div tag.Please correct that.

So:-

<div id="1">
  <button class="select">one</button>
 <div>

Needs to be:-

<div id="1">
  <button class="select">one</button>
</div>

jQuery Selectors, jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on  Selecting by ID or by class alone (among other things) invokes browser-supplied functions like document.getElementById() which are quite rapid, whereas using a descendent selector invokes the Sizzle engine as mentioned which, although fast, is slower than the suggested alternative.


There are number of ways to handle such things, but while going your specific way/approach; you will need to modify your JS code like below:

<div id="1">
    <button class="select">one</button>
</div>

<div id="2">
    <button class="select">two</button>
</div>

Javascript Code:

 $(function(){
     $('.select').click(function(){
        var parentElement = $(this).closest('div');
        alert ($(parentElement).attr('id'));

    });
});

Check this running code example here: https://jsfiddle.net/u2sx44wr/

How do I select an item using class or ID?, Since IDs are unique, this expression always selects either zero or one elements depending upon whether or not an element with the specified ID  The #id selector selects the element with the specific id. The id refers to the id attribute of an HTML element. Note: The id attribute must be unique within a document. Note: Do not start an id attribute with a number. It may cause problems in some browsers.


Missing closing div and you can use $this for which button is clicked.No need to handle click event twice.

$(function() {
  $('div').find('.select').click(function() {
    var msg = $(this).html() + "    clicked";
    alert(msg);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
  <button class="select">one</button>
</div>

<div id="2">
  <button class="select">two</button>
</div>

Selecting Elements, Selecting Elements by ID. 1. $( "#myId" ); // Note IDs must be unique per  The above sample is used to select an element based on ID and a class from the DOM. The sample application has been attached as a reference. Long way to go with jQuery.


a good solution for this problem is:

$('#1').find('.select').click(function() { ... });

with this you can also add the click handler for child elements of the "select" class.

ID Selector (“#id”), For id selectors, jQuery uses the JavaScript function document.getElementById() Examples: Select the element with the id "myDiv" and give it a red border. In this example, we used jQuery to find the element with the id of test-switch (the Test Button), and when we clicked on the button, jQuery triggered a function to toggle the class ("newTestClass") on the two elements (the second article and the section) with a class of test.


Attribute Starts With Selector [name^=”value”], that produce HTML with systematic element IDs. However it will be slower than using a class selector so leverage classes, if you can, to group like elements. How do I select an element by an ID that has characters used in CSS notation? Because jQuery uses CSS syntax for selecting elements, some characters are interpreted as CSS notation. In order to tell jQuery to treat these characters literally rather than as CSS notation, they must be escaped by placing two backslashes in front of them.


.hasClass(), hasClass() method will return true if the class is assigned to an element, even if other classes also <div id="result1">First paragraph has selected class: </div>. jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $().


How to use jQuery Class and Id Selector to find DOM , class for selecting elements. If you have used CSS before then you might know how to select elements in CSS and that will be very useful while  Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element. Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM.