CODEWITHSUNDEEP
jquery
John
John

Reputation: 217

Checking the id of an element jquery

I have 3 different objects with 3 different id's that I'd i'm passing to a function. I'd like to check which id is being sent down to the function and then alert something different for each id. I have this code but it doesn't work and i'm not sure if it's even right at all or possible to do it this way. With the $(this), i was trying to get the element that I am currently dragging and send it down to the checkForID function.

$(document).ready(function() {

 $('#option1').draggable();
 $('#option2').draggable();
 $('#option3').draggable();

 checkforID($(this));

 });

 function checkforID(value)
{
  if(value == $('#option1')
  alert('You've picked option1');
  else  if(value == $('#option2')
  alert('You've picked option2');
  else  if(value == $('#option3')
  alert('You've picked option3');

}

Upvotes: 0

Views: 73

Answers (4)

Yair Nevet
Yair Nevet

Reputation: 13003

Change it to:

 function checkforID(value)
{
  var id = $(value).attr('id');
  if(id == '#option1')
  alert("You've picked option1");
  else  if(id == '#option2')
  alert("You've picked option2");
  else  if(id == '#option3')
  alert("You've picked option3");

}

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074148

You haven't given any context for where you're calling checkforID, but I'm going to assume it somewhere where this refers to a DOM element, such as within a jQuery event handler.

If you're passing in a jQuery object (as you appear to be):

var id = value.attr("id");

...which will give you the id of the first element in the set (jQuery objects are sets; in your quoted code, the set will have just one element).

If you just pass in an element:

var id = value.id;

Re your comment:

I was actually trying to pass down the id of the element that i am currently dragging. Will $(this) not work?

this is correct, it's the element being dragged (no need to wrap it in a jQuery object unless you want to), provided the code is within any of the event handlers for a draggable, such as start, stop, or drag. Here's an example (note the event handlers): Live Copy

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Drag example</title>
  <style>
    .draggable {
      display: inline-block;
      border: 1px solid black;
      background-color: #aaa;
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <div id="display">&nbsp;</div>
  <div id="d1" class="draggable"></div>
  <div id="d2" class="draggable"></div>
  <div id="d3" class="draggable"></div>
  <script>
    (function() {
      var display = $("#display");
      $(".draggable").draggable({
        start: function(event, ui) {
          display.html("You're dragging " + this.id);
        },
        stop: function(event, ui) {
          display.html("You stopped dragging");
        }
      })
    })();
  </script>
</body>
</html>

Upvotes: 2

Felix
Felix

Reputation: 38102

Seem like you're looking for .is():

function checkforID(value) {
  if(value.is('#option1')) alert("You've picked option1");
  else if(value.is('#option2')) alert("You've picked option2");
  else if(value.is('#option3')) alert("You've picked option3");
}

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

In your code checkforID($(this)), the $(this) will send the global window object to the function.

Please send the appropriate object

Upvotes: 1

Related Questions