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

Question

如何找到具有电子邮件地址作为类名的元素。 电邮地址是动态的。

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

我同意将电子邮件地址用作课程可能不是最佳选择。 但是，您的转义方法不起作用的唯一原因是因为您错误地转义。 你的替代价值太多\\了。

它应该是

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

然后它的工作原理 。

Answer 3

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

查看此代码

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

使用属性等于选择器[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 5

尝试

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

要么

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