Question

目前我有一个脚本，使用jQuery以编程方式在页面上创建许多面板（是的，Twitter Bootstrap面板）。它们基本相同，除了每个文本中都有一些动态文本，文本下方有一个按钮。有点像这样：

<div class="panel panel-default" id="panel1">
    <div class="panel-body">There's some dynamically-generated text here.</div>
    <div class="panel-footer">
        <button class="btn btn-default btn-block">Click Here</button>
    </div>            
</div>

因此，我正在尝试为按钮编写一个onclick方法，该方法将抓取该面板主体，然后替换其中的文本。替换文本函数没有问题，但我有一段时间编写正确的jQuery以获取正确的元素。

我尝试过什么

首先，我尝试使用“this”作为上下文，但正如预期的那样，这不起作用。

$(".panel-body", this).text(updateContent())

我知道这会奏效：

$("#panel1 .panel-body").text(updateContent())

所以我尝试在同一个循环中动态构建该选择器我构建了id，但是所有单引号和双引号以及加号我无法正确地解析该行。

我确信解决方案很简单，但是我的眼睛正在穿过，我看不太清楚。

Answer 1

假设this是您的按钮元素，请尝试

$(this).closest('.panel').find('.panel-body').text("foobar")

使用closest()的好处是，您可以任意深入嵌套按钮，而无需更改处理程序。

$(function(){
  
  $('.panel .btn').click(function(){
    $(this).closest('.panel').find('.panel-body').text('foobar');
  })
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default" id="panel1">
    <div class="panel-body">There's some dynamically-generated text here.</div>
    <div class="panel-footer">
        <button class="btn btn-default btn-block">Click Here</button>
    </div>            
</div>
<div class="panel panel-default" id="panel1">
    <div class="panel-body">There's some dynamically-generated text here.</div>
    <div class="panel-footer">
        <button class="btn btn-default btn-block">Click Here</button>
    </div>            
</div>
<div class="panel panel-default" id="panel1">
    <div class="panel-body">There's some dynamically-generated text here.</div>
    <div class="panel-footer">
        <button class="btn btn-default btn-block">Click Here</button>
    </div>            
</div>

Answer 2

试试这个。

$(this).parent().prev().html("updated content");

Answer 3

您非常接近，而不是直接使用this，您需要先使用closest找到父面板：

$(".panel-body", $(this).closest('div.panel')).text(updateContent())

如何在附近的元素中创建按钮更改文本？

3 个答案: