Question

这是一个快速示例，而不是我的实际代码。点击div button，如何在锚标记或父div title之后替换html？这里的jQuery代码替换了div title中的所有内容，我只想替换锚标记之后的内容。

脚本

$(function() {

    $('.button').live('click',function() {
    var info = $(this).next('.information').html();
    $(this).next('.title').html(info);
    });
});

HTML

<div class='container'> 
    <div class='button'>Click Me</div>
    <div class='information' style='display:none;'>information</div>
    <div class='title'><a href='http://www.example.com/' class='link'></a>title</div>
</div>

Answer 1

你应该将其包裹在span

中

<div class='title'><a href='http://www.example.com/' class='link'></a><span>title</span></div>

并以

为目标

$(function() {
    $('.button').live('click',function() {
      var self = $(this);
      var info = self.nextAll('.information').html();
      self.nextAll('.title').find('span').html(info);
    });
});

Answer 2

我改变了一些事情，我认为这个jsFiddle与您的需求接近 - http://jsfiddle.net/FloydPink/LHPT2/

1）$title应该在锚标记

内

2）information div应位于按钮之前，因为您正在使用.prev()

试试这个：

<script type="text/javascript">
$(function() {
    $('.button').live('click', function() {
        var info = $(this).prev('.information').html();
        $(this).next('.title').children('a').text(info);
    });
});

</script>
<?php

while ($row=mysql_fetch_assoc($query)) { 

$id = $row['id'];
$title = $row['title'];
$information = $row['information'];

echo "<div class='container'> 
<div class='information' style='display:none;'>$information</div>
<div class='button'>Click Me</div>
<div class='title'><a href='http://www.example.com/' class='link'>$title</a></div>
</div>";

}

?>

Answer 3

而不是使用prev()和next()，尝试使用siblings()

$('.button').live('click',function() {

var info = $(this).siblings('.information').html();

$(this).siblings('.title').html(info);

});

在锚标记后替换div的html？

3 个答案: