如何在转发器中设置子 DIV 的文本？

Question

我有一个包含以下 HTML 片段的转发器：

<div id='parent'>
    <div id='child1'/>
    <div id='child2'>
         <script type="text/javascript" src="script.js"></script>
    </div>
</div>

我想使用 script.js 中的函数选择标记为“parent”的 div，并设置 ID 为“child1”的 div 的内部 HTML。

我的最终 html 应该如下所示：

<div id='parent'>
    <div id='child1'>This inner text was set by jQuery</div>
    <div id='child2'>
        <script type="text/javascript" src="script.js"></script>
    </div>
</div>

How do I do it using jQuery?

Answer 1

首先，您不能在转发器中以这种方式编写 HTML 代码。 您不能将相同的 id 分配给页面上的多个元素。 如果您要识别它们，您的 HTML 将需要使用类来进行识别。

<div class="parent">
  <div class="child1"><div>
  <div class="child2">Click Me<div>
</div>

script 标签中的函数无法知道它们在 DOM 中相对于其他所有内容的位置。 您需要将函数调用绑定到某个元素，以便能够派生与其相关的 DOM 关系。 最简单的方法是使用 jQuery（或其他框架）向元素添加一些处理程序。

$(function() {
    $('.child2').click( function() {
        $(this).parent().find('.child1').html( 'some html' );
    });
});

上面的代码将为每个带有 child2 类的 DIV 添加一个点击处理程序，当它被点击时，会找到它的父 DIV（注意，该类在父级上是不必要的），然后是正确的子 DIV，其 HTML 为根据其类别进行更新。 另请注意，上述脚本只需添加到页面一次，而不是每个转发器项目一次。

Answer 2

$('#parent').children('#child1').html('html goes here');

Answer 3

你的问题没有多大意义。 您可以这样做：

$("#child1").html("blah");

您不需要对 #parent 或 this 的引用。

但假设情况并非如此，您可以通过多种方式找到与 this 相关的元素：

$(this).children("#child1")

或

$(this).find("#child1") // descendant, not just child

或

$("#child1", this) // descendant, not just child