반복 레이아웃 내에서 하위 DIV의 텍스트를 어떻게 설정합니까?

StackOverflow https://stackoverflow.com/questions/1207312

  •  05-07-2019
  •  | 
  •  

문제

다음 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>

jQuery를 사용하여 어떻게 수행합니까?

도움이 되었습니까?

해결책

첫째, 반복 레이아웃에서는 이러한 방식으로 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을 업데이트할 올바른 하위 항목을 찾습니다. 또한 위 스크립트는 반복 레이아웃 항목당 한 번이 아니라 페이지에 한 번만 추가하면 됩니다.

다른 팁

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

당신의 질문은 그다지 의미가 없습니다. 당신은 이것을 할 수 있습니다 :

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

당신은 참조가 필요하지 않습니다 #parent 또는 this.

그러나 그것이 사실이 아니라고 가정하면, 당신이 this:

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

또는

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

또는

$("#child1", this) // descendant, not just child
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top