Question

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

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

我想使用script.js中的函数选择div标记的“parent”，并设置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>

如何使用jQuery进行操作？

Answer 1

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

Answer 2

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

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

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

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

上面将为每个DIV添加一个单击处理程序，使用类child2，当单击它时，会找到它的父DIV（请注意父类不需要该类），然后是正确的子目录，其HTML为根据其类更新。 另请注意，上述脚本只需要添加到页面一次，而不是每个转发器项目一次。

Answer 3

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

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

您不需要引用#parent或this。

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

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

或

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

或

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

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

3 个答案: