How can I find an element having an email address as class name. Email address is dynamic.

$(document).ready(function(){
  //not working getting error
  var email="[email protected]";
  $("#main").find("."+email);
  //not working
  $("#main").find("."+escapeSelecorchars(email));
});

function escapeSelecorchars = function(val) {
  return val.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g,"\\\\$&");
};

<div id="main">
  <div class="[email protected]"></div>
</div>

How can I find an element having an email address as class name. Email address is dynamic.

$(document).ready(function(){
  //not working getting error
  var email="[email protected]";
  $("#main").find("."+email);
  //not working
  $("#main").find("."+escapeSelecorchars(email));
});

function escapeSelecorchars = function(val) {
  return val.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g,"\\\\$&");
};

<div id="main">
  <div class="[email protected]"></div>
</div>

• javascript
• jquery
• html
• classname

• 1 use data-attr() instead of putting the email value to class – guradio Commented Oct 6, 2016 at 11:23
• but the how to find the element can you give example – pareshm Commented Oct 6, 2016 at 11:24
• but that thing is only the unique thing to indentify the element – pareshm Commented Oct 6, 2016 at 11:25
• "but the how to find the element can you give example" With an attribute selector. api.jquery./attribute-equals-selector – Felix Kling Commented Oct 6, 2016 at 11:27
• 1 @pareshm check this demo – guradio Commented Oct 6, 2016 at 11:31

5 Answers 5

I'd try something like this

Js:

$(function() {
  var email = "[email protected]";
  var div = $("#main").find("div[data-email='"+email+"']");
});

Html:

<div id="main">
  <div data-email="[email protected]"></div>
</div>

Here is a working plunker https://plnkr.co/edit/BDo9SvksNIfCLa6I0HfI

I agree that it's probably not the best idea to use an email address as a class. However, the only reason your escaping approach doesn't work is because you are escaping incorrectly. You have too many \ in your replacement value.

It should be

function escapeSelecorchars(val) {
  return val.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g,"\\$&");
};

and then it works.

Because of special characters it is difficult to find element.

Checkout this code

$(document).ready(function(){
  //not working getting error
var ele = $("#main").find("div[data-email='[email protected]']");
 
 
	console.log($(ele).attr('data-email'))

  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <div data-email="[email protected]" class="email"></div>
</div>

Use Attribute Equals Selector [class="value"”]

console.log($('#main > div[class="[email protected]"]').length);

$(document).ready(function(){
  console.log($('#main > div[class="[email protected]"]').length);
  
  $("#main").find("div[class='[email protected]']").html("Appended");
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
     <div class="[email protected]"></div>
</div>

Try

$('#main div').filter(function(){ return $(this).attr('class') == '[email protected]'});

or

$('div').filter(function(){ return $(this).attr('class') == '[email protected]'});