首页 > 解决方案 > 如何在jQuery中转义双引号

问题描述

我没有成功转义 jQuery 中的双引号 (")。

这是我的代码:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.red { border-top: 10px solid red; }
.yellow { border-top: 10px solid yellow; }
.left { border-left: 3px solid green; } 
</style>
</head>
<body>
<ul id="choose">
    <li>Goofy</li>
  <li><a href="blabla.aspx">Mickey</a></li>
  <li><a href="other.ext">Mickey</a></li>
  <li>Pluto</li>
</ul>
    
<script>
$(document).ready(function(){
  $("p:contains(is)").css("background-color", "yellow");
  $("li:contains('Mickey')").addClass('left');
  $("li:contains('aspx">Mickey')").addClass('yellow');
  $("li:contains('Pluto')").addClass('left');
});
</script>

</body>
</html>

标签: jquery

解决方案


尝试用contains. HTML 往往会发生变化,甚至一个空格也会破坏代码。

相反,:has为孩子使用并传递一个适当的选择器:

$(document).ready(function(){
  $("p:contains(is)").css("background-color", "yellow");
  $("li:contains('Mickey')").addClass('left');
  $("li:has(a[href$=aspx]:contains('Mickey'))").addClass("yellow");
  $("li:contains('Pluto')").addClass('left');
});
.red { border-top: 10px solid red; }
.yellow { border-top: 10px solid yellow; }
.left { border-left: 3px solid green; } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ul id="choose">
  <li>Goofy</li>
  <li><a href="blabla.aspx">Mickey</a></li>
  <li><a href="other.ext">Mickey</a></li>
  <li>Pluto</li>
</ul>

或者,您也可以仅使用链接本身的选择器并获取liwith .parent()


推荐阅读