jQuery：如何在div中与其他div分开设置样式化连接元素？

Question

我有email变量稍后一个所附successEmailView可变内动态地添加。 但是，我想设置email文本的样式，使其具有不同的颜色。 由于它已成为成功容器div的一部分，我该怎么办？

  let email = $('#email').val()
  let successEmailView = '<div class="success-container"><div class="text-success">An email was sent to ' + email + ' with instructions for resetting your password</div>

Answer 1

您可以像这样将其包装在跨度上：

  let email = $('#email').val()
  let successEmailView = '<div class="success-container"><div class="text-success">An email was sent to <span class="myemail">' + email + '</span> with instructions for resetting your password</div>

然后，针对.myemail类，并执行您想要的任何操作。

Answer 2

如果我正确理解了您的需求，请尝试以下操作：

 let email = $('#email').val()
 let successEmailView = '<div class="success-container"><div class="text-success">An email was sent to ' + 
     '<span>'+email +'</span>'+
      ' with instructions for resetting your password</div>

现在的CSS：

.text-success>span{
     color: #f90 !important;
}

或使用html本身（内联样式）：

 ... +'<span style="color: #f90 !important;">'+email +'</span>'+...

并且如果您需要在添加颜色后更改颜色：

 var r=/ [a-z][a-z0-9_.]*?@[a-z][a-z0-9_]*?\.[a-z]{1,4} /i;//This is not a good RegExp for email and I just wrote it for your tests. You can find proper one with a search
 var dst=document.querySelector(".text-success");
 dst.innerHTML=dst.innerHTML.replace(r, function(em){return "<span>"+em+"</span>";});

Answer 3

您不能仅在文本上实现样式。 您必须在文本周围有一些包装元素。 您可以使用一个类将span值包装起来，然后向该类添加所需的样式：

 let email = $('#email').val(); email = '<span class="emailText">' + email + '</span>'; let successEmailView = '<div class="success-container"><div class="text-success">An email was sent to ' + email + ' with instructions for resetting your password</div>'; $('body').append(successEmailView); 

 .emailText { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="email" value="Sample Text"/>