How can I find element having an email address as class name using jQuery?

Question

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="abc@gmail.com";
  $("#main").find("."+email);
  //not working
  $("#main").find("."+escapeSelecorchars(email));
});

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

<div id="main">
  <div class="abc@gmail.com"></div>
</div>

use `data-attr()` instead of putting the email value to class — guradio, Oct 06 '16 at 11:23
but that thing is only the unique thing to indentify the element — pareshm, Oct 06 '16 at 11:25
*"but the how to find the element can you give example"* With an attribute selector. https://api.jquery.com/attribute-equals-selector/ — Felix Kling, Oct 06 '16 at 11:27
You cannot use @ in selector name and (.)period can be use to declare the class in the beginning of the selector name. — fruitjs, Oct 06 '16 at 11:30
Btw, the issue is actually that have too many ``\`` in your replacement value. If you use `"\\$&"` it works fine. https://jsfiddle.net/tvqg4nhg/ — Felix Kling, Oct 06 '16 at 11:32

michalh · Accepted Answer · 2016-10-06T12:13:30.187

4

I'd try something like this

Js:

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

Html:

<div id="main">
  <div data-email="abc@gmail.com"></div>
</div>

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

edited Oct 06 '16 at 12:13

answered Oct 06 '16 at 11:27

michalh

2,907
22
29

score 2 · Answer 2 · answered Oct 06 '16 at 11:35

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.

Chetan · Answer 3 · 2016-10-06T11:49:53.057

1

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='abc@gmail.com']");
 
 
 console.log($(ele).attr('data-email'))

  
});

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

<div id="main">
  <div data-email="abc@gmail.com" class="email"></div>
</div>

edited Oct 06 '16 at 11:49

answered Oct 06 '16 at 11:41

Chetan

944
5
22

i want find only one div and cannot use each loop – pareshm Oct 06 '16 at 11:47

Mohit Tanwani · Answer 4 · 2016-10-06T11:42:10.310

0

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

console.log($('#main > div[class="abc@gmail.com"]').length);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
     <div class="abc@gmail.com"></div>
</div>

edited Oct 06 '16 at 11:42

answered Oct 06 '16 at 11:31

Mohit Tanwani

6,608
2
14
32

What do you mean by dynamic changed ? – Mohit Tanwani Oct 06 '16 at 12:08
Do you mean you took email in variable ? – Mohit Tanwani Oct 06 '16 at 12:13

score 0 · Answer 5 · answered Oct 06 '16 at 11:50

0

Try

$('#main div').filter(function(){ return $(this).attr('class') == 'abc@gmail.com'});

or

$('div').filter(function(){ return $(this).attr('class') == 'abc@gmail.com'});

answered Oct 06 '16 at 11:50

Atul Mishra

298
2
11

How can I find element having an email address as class name using jQuery?

5 Answers5