Как мне установить текст дочернего DIV внутри повторителя? - PullRequest
Новая
       6

Как мне установить текст дочернего DIV внутри повторителя?

3 голосов
/ 30 июля 2009

У меня есть повторитель, содержащий следующий фрагмент HTML: 

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

Я бы хотел выбрать тег div "parent" с помощью функции из script.js и установить внутренний HTML-код div с идентификатором child1.

Мой окончательный 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?

Ответы [ 3 ]

2 голосов
/ 30 июля 2009

Во-первых, вы не можете так закодировать свой HTML в ретрансляторе. Вы не можете назначить одинаковые идентификаторы нескольким элементам на странице. Ваш 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' );
    });
});

Вышеприведенное добавит обработчик кликов к каждому DIV с классом child2 и, когда он щелкнет, найдет его родительский DIV (обратите внимание, что этот класс не нужен для родителя), а затем правильный дочерний элемент, HTML-код которого нужно обновить на своем классе. Также обратите внимание, что приведенный выше сценарий необходимо добавлять на страницу только один раз, а не один раз для каждого элемента повторителя.

2 голосов
/ 30 июля 2009 
$('#parent').children('#child1').html('html goes here');
0 голосов
/ 30 июля 2009

Ваш вопрос не имеет большого смысла. Вы можете просто сделать это: 

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

Вам не нужна ссылка на #parent или this.

Но если предположить, что это не так, есть несколько способов найти элемент относительно this: 

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

или 

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

или 

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