2013-04-08 2 views
1

Мне нужна замена тега html «a» определенного класса другим тегом.jquery mobile заменить гиперссылку на другую гиперссылку

это мой код

<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, но к моему разочарованию он не работает для меня в этом случае. Любая помощь приветствуется. Спасибо.

ответ

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 Мобильная версия:

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

EDIT:

В вашем примере, замените эти строки:

<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 Mobile перед jQuery, и это, вероятно, вызывает ошибку.

+0

, когда я использовал ваш оператор jquery, он не работал. Но когда я копировал весь ваш код, он работал. Что мне здесь не хватает? :( – crowso

+0

Вы говорите о моем первом или втором примере? – Gajotres

+0

как. Когда я заменил свои строки кода jQuery на ваш, он не работает. Пожалуйста, помогите мне. – crowso

0

Кроме того, после манипуляции с DOM может быть предпочтительнее использовать следующее. Это делается для того, чтобы вернуть JQuery мобильный CSS к элементам.

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

Или специально

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

если вы хотите обновить CSS в определенной части в вашем DOM.

Смежные вопросы