1

我需要用另一个 a 标签替换某个类的 html“a”标签。

这是我的代码

<html>
<head>

<script type="text/javascript"src="jquery.mobile-1.3.0"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0" type="text/css">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$('.list1').replaceWith('<a class="list3" href="#">link3</a>');
</script>

</head>

<body>

<h1> hello world </h1>

<div class="content-page" >
  <div class="list-page">
    <a class="list1" href="#">link1</a>
    <a class="list2" href="#">link2</a>  
  </div>
</div>
</body>

</html>

我使用了 jquery replaceWith 函数，但令我失望的是，在这种情况下它对我不起作用。任何帮助是极大的赞赏。谢谢你。

4

2 回答 2

1

解决方案：

<html>
<head>
    <!-- STYLESHEETS //-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <!-- JavaScripts //-->
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
    <script type="text/javascript">
    $(document).ready(function() {
        $('.list1').replaceWith('<a class="list3" href="#">link3</a>');
    }); 
    </script>
</head>
<body>
<h1> hello world </h1>
<div class="content-page" >
  <div class="list-page">
    <a class="list1" href="#">link1</a>
    <a class="list2" href="#">link2</a>  
  </div>
</div>
</body>

您需要将代码包装到准备好的文档中。

或者如果你想要 jQuery Mobile 版本：

<html>
<head>
    <!-- STYLESHEETS //-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <!-- JavaScripts //-->
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
    <script type="text/javascript">
    $(document).on('pagebeforeshow', '.content-page', function() {
        $('.list1').replaceWith('<a class="list3" href="#">link3</a>');
    }); 
    </script>
</head>
<body>
<h1> hello world </h1>
<div class="content-page" data-role="page">
  <div class="list-page">
    <a class="list1" href="#">link1</a>
    <a class="list2" href="#">link2</a>  
  </div>
</div>
</body>

编辑 ：

在您的示例中，替换以下行：

<script type="text/javascript"src="jquery.mobile-1.3.0"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0" type="text/css">
<script type="text/javascript" src="jquery.js"></script>

有了这行：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<!-- JavaScripts //-->
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"</script>

基本上首先初始化jQuery Mobile css，然后初始化jQuery，然后初始化jQuery Mobile。在您的示例中，您在 jQuery 之前初始化 jQuery Mobile，这可能会导致错误。

于 2013-04-08T15:55:12.880 回答
0

此外，最好在 DOM 操作之后使用以下内容。这样做是为了将 JQuery 移动 CSS 应用回元素。

    $(":jqmData(role='page')").trigger('create');

或者具体来说

    $(".list-page").trigger('create');

如果您想刷新 DOM 中特定部分的 CSS。

于 2013-04-08T16:19:28.087 回答