Selecting an element using class and some other attribute in Jquery

Question

Following is my code. I'm trying to select an element based on tow attributes , one a class using .class selector. and other using a data attribute [data-depth='2'] .

jQuery(document).on('click', ".node [data-depth='2']", function() {
  alert("clicked");
})

.node {
  height: 30px;
  width: 150px;
  padding: 5px;
  background: #EF4836;
  margin: 10px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="node" data-depth="2">
  Click me
</div>

<div class="node" data-depth="3">
  Do not Click me
</div>

But the element is not getting selected. What am i doing wrong ?

Ibrahim Khan · Accepted Answer · 2016-03-09 06:15:30Z

4

Remove the space between .node and [data-depth='2']. Space means descendant elements of .node has attribute data-depth="2".

jQuery(document).on('click', ".node[data-depth='2']", function() {
    alert("clicked");
})

.node {
  height: 30px;
  width: 150px;
  padding: 5px;
  background: #EF4836;
  margin: 10px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="node" data-depth="2">
  Click me
</div>

<div class="node" data-depth="3">
  Do not Click me
</div>

edited Mar 9, 2016 at 6:15

answered Mar 9, 2016 at 6:13

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guradio · Accepted Answer · 2016-03-09 06:22:41Z

2

jQuery(document).on('click', "[data-depth='2'].node", function() {
  alert("clicked");
})

.node {
  height: 30px;
  width: 150px;
  padding: 5px;
  background: #EF4836;
  margin: 10px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="node" data-depth="2">
  Click me
</div>

<div class="node" data-depth="3">
  Do not Click me
</div>

It should have no space between them. If there is space it will be looking for the child of the class nodethat has [data-depth='2']

edited Mar 9, 2016 at 6:22

answered Mar 9, 2016 at 6:14

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

KPrasad · Accepted Answer · 2016-03-09 08:44:27Z

0

Another Method

This will have more of practical use:

HTML

Click me

 <div class="node" data-depth="3">
    Do not Click me
 </div>

JAVASCRIPT

$(document).on('click', ".node", function() {
_this = $(this);
_depth = _this.data("depth");

  switch(_depth) {
   case 2: alert('clicked '+ 2);break;
   case 3: alert('clicked '+ 3);break;
   default : alert('clicked other')
  }
})

answered Mar 9, 2016 at 8:44

KPrasad

11 bronze badge

Collectives™ on Stack Overflow

Selecting an element using class and some other attribute in Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related