Jquery更改html标记

时间:2012-03-14 12:06:25

标签: javascript jquery html

我的结构如下:

<div id="mali_oglasi">
    <?php foreach ($mgs as $key) : ?>
    <p class="mali_oglas">
        <span class="name"><?php echo $key['name'] ?></span>
        <span class="body"><?php echo $key['body'] ?></span>
        <span class="contact_author"><?php echo $key['contact_author'] ?></span>
        <span class="date_created"><?php echo $key['date_created'] ?></span>
        <span class="date_expires"><?php echo $key['date_expires'] ?></span>
        <span class="email"><?php echo $key['email'] ?></span>
    <?php foreach ($lokacija as $lok) : ?>
    <?php if($lok['id_location'] == $key['location_id']) : ?>
    <span><?php echo $lok['name'] ?></span>
    <?php endif ?>
    <?php endforeach; ?>

    <?php foreach ($kategorija as $kat) : ?>
    <?php if($kat['id_category'] == $key['category_id']) : ?>
    <span><?php echo $kat['name'] ?></span>
    <?php endif ?>
    <?php endforeach; ?>
    <a class="obrisi" id="<?php echo $key['id_global_info'] ?>">Obrisi</a>     
    <a class="izmeni" id="<?php echo $key['id_global_info'] ?>">Izmeni</a>  
</p>
    <?php endforeach; ?>
</div>

单击<a class="izmeni" id="<?php echo $key['id_global_info'] ?>">Izmeni</a>时,需要将span更改为input或textarea。我怎么能这样做?

5 个答案:

答案 0 :(得分:2)

您将使用jQuerys .replaceWith() - 方法。 E.g。

$('.izmeni').on('click', function() {
    $('span').replaceWith('<input />');
});

您还可以在点击处理程序中使用DOM来获取目标元素:

$('.izmeni').on('click', function() {
    $(this).closest('span').replaceWith('<input />');

    // or:
    //  $(this).closest('p').find('span').replaceWith('<input />');
    // etc.
});

或类似的东西。看看各种tree traversal functions的jQuerys。

答案 1 :(得分:1)

使用click处理程序:

$(document).ready(function() {
    $('#<?php echo $key['id_global_info'] ?>').click(function() {
       $(selectorforspan).html('the new html');
    });
});

这可以使用.html()函数来设置选择器($(selectorforspan))中指定的元素的HTML内容。

答案 2 :(得分:0)

你应该做

$('a.izmeni').click(function(){
    $('span.classofyourspan').replaceWith($('<input>', { type : "text", name: "yourname"}));
});

答案 3 :(得分:0)

有几种方法可以做,但使用jQuery replaceWith方法看起来是最好的方法。他们的文档甚至还有一个例子:http://api.jquery.com/replaceWith/

$('.izmeni').click(function() {
    $(this).replaceWith('<span>'+$(this).text()+'</span>');
});

答案 4 :(得分:0)

$('a.izmeni').live('click', function() {
 var span = $('p.mali_oglasi span');
 var inputBox = $('<input />').attr('value', span.text());

 span.replaceWith(inputBox);
});