Question

这是我的场景，一个带有“holder”div的ul列表，其中包含HTML。我想让ul列表有链接，当用户点击时应该填充持有者div。我对Jquery有一些经验，但并不多。我可以替换它一次，但希望能够用不同的HTML块替换“holder”div。我想要的是持有者div用相应的包HTML填充。

<ul>
    <li><a href="#">Package 1</a></li>
    <li><a href="#">Package 2</a></li>
    <li><a href="#">Package 3 3</a></li>
</ul>

<div class="holder">
    <p>replace this text here<p>
</div>

<div>
    Package 1 HTML
</div>
<div>
    Package 2 HTML
</div>
<div>
    Package 3 HTML
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {      
        $("li a").click(function() {
             $("div.holder").text($(this).next().text());
             return false;
        });
    });
</script>

Answer 1

我不确定.next（）应该做什么。没有它，它不会做你想要的吗？

$(document).ready(function() {      
    $("li a").click(function() {
         $("div.holder").text($(this).text());
         return false;
    });
});

Answer 2

你基本上是在寻找这个。

$(document).ready(function() {      
    $("li a").click(function() {
         //get the index of li element
         var index = $(this).parent().index();

         //get the required div from where to get the content
         var $requiredDiv = $(this)
                            .cloest('ul')
                            .nextAll('div:gt(0)')
                            .eq(index); 

         $("div.holder").html($requiredDiv.html());

         return false;
    });
});

nextAll(selector)获取匹配元素集中每个元素的所有后续兄弟，可选择由选择器过滤。

Answer 3

使用html()。如果我理解正确的话，这就是你想要做的事情：

$('li').find('a').click(function(e) {
    var output = '<p>'+ $(this).text() +'</p>';
    $('.holder').append(output);
    e.preventDefault();
});

单击链接时替换div中的HTML

3 个答案: