如何使用 jQuery 找到电子邮件地址作为 class 名称的元素？

Question

如何找到一个电子邮件地址作为 class 名称的元素。电子邮件地址是动态的。

$(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>

Answer 1

我会尝试这样的事情

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>

这是一个正在工作的 plunker https://plnkr.co/edit/BDo9SvksNIfCLa6I0HfI

Answer 2

使用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>

Answer 3

我同意使用电子邮件地址作为 class 可能不是最好的主意。但是，您的转义方法不起作用的唯一原因是您转义不正确。您的替换值中的 \ 太多了。

应该是

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

然后是it works.

Answer 4

由于特殊字符，很难找到元素。

检查此代码

$(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>

Answer 5

尝试

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

或

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

如何使用 jQuery 找到电子邮件地址作为 class 名称的元素？

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

html

javascript

jquery

classname