jQuery를 사용하여 동적 로딩 페이지에서 중복 객체를 해결하는 방법은 무엇입니까?

동적 로딩 콘텐츠에서 중복 객체를 해결하고 싶습니다. 쉽게 이해할 수 있도록 다음 소스 코드를 살펴보십시오. 이 페이지의 헤더에 스크립트를 들어 1 개 동적 컨텐츠로드jQuery를 사용하여 동적 로딩 페이지에서 중복 객체를 해결하는 방법은 무엇입니까?

<body> 
    <div id="general-div"></div>> 
    <div id="div1"></div> 
    <div id="placeholder1"> 
      Dynamic Content will be placed inside this. 

      <div class="inner-div"></div> 
      <div class="div1"></div> 
    </div> 
</body>

와

자료 페이지 HTML, 그것은 다음 코드와 같은 "일반 DIV"개체를 선택하는 것은 매우 쉽습니다.

$('#general-div')

자리 표시 자 1 안의 선택 "inner-div"객체는 매우 쉽습니다. 그래서 아래 코드를 사용하여 선택할 수 있습니다.

$('.inner-div')

위의 코드는 완벽하게 작동 할 수 있습니다. 그러나, 다음 HTML과 같은 문서에 복제 된 객체가 두 개 이상인 경우 위 코드를 사용할 수 없습니다. 위의 코드는 내가 원하지 않는 2 개의 객체를 반환합니다.

자료 페이지 HTML -

<body> <div id="general-div"></div>> <div id="div1"></div> <div id="placeholder1"> Dynamic Content will be placed inside this. <div class="inner-div"></div> <div class="div1"></div> </div> <div id="placeholder2"> Dynamic Content will be placed inside this. <div class="inner-div"></div> <div class="div1"></div> </div> </body>

가능한 부하 다른 동적 콘텐츠를로드하는 방법 1

후 내가해야 등 동적 로딩 내용의 지정 jQuery를 대상 foreach는 스크립트를 만들 다음 코드.

// Deep copy for jQuery object. var specfiedjQueryObj = $.extend(true, {}, jQuery); // modify find function in jQuery object. specfiedjQueryObj.fn.find = function(selector) { // by adding placeholder selector before eval result. return new specfiedjQueryObj.fn.old_find('#placeholder1 ' + selector); }; // So, I can select any object in dynamic loading content. (function($) { // This result must be 1 object. $('.div1'); })(temp);

비록이 솔루션이 훌륭하게 작동해야합니다. 하지만 jQuery는 매우 복잡한 객체라는 것을 알게되었습니다. 나는 그것을 사용하려고 할 때 많은 오류를 발견했다.

이 문제를 해결할 생각이 있습니까?

추신. PlaceHolder ID가 고정 ID가 아닙니다. 따라서 셀렉터 규칙에서 고정하는 것은 불가능합니다. 더욱이, 나는 정확히 문서의 요소와 위치 (처음, 마지막 또는 중간)를 정확히 알지 못합니다. 동적로드 때문에 많은 페이지에 내용이 표시됩니다.

출처

2009-11-05 Soul_Master

'inner-div'의 내용을 알고 계십니까? 독특한가요? 이 질문과 관련 질문에 대한 답변과 의견을 바탕으로 jQuery가 작동하지 않거나 충족해야하는 비즈니스 규칙 및 기술 요구 사항을 이해하지 못합니다. – beggs

나는 당신이 jQuery에 대해 오해하고 있다고 생각한다. 예를 들어 처음 보셨습니까? –

다음 함수는 부분로드보기 페이지의 데이터를 처리하고 스크립트의 각 jQuery 선택기에 지정된 컨텍스트를 추가합니다. 이 대답은 잘 작동합니다. 그러나 외부 스크립트 파일은 지원하지 않습니다.

function renderPartialView(control, data) 
{ 
    // For detecting all script tag in loaded data. 
    var reExtractScript = /(<script type="text\/javascript">)([\s\S]+?)(<\/script>)/gi; 

    // For detecting all "$" sign (must be jQuery object) in loaded data. 
    var reFindDollarSign = /\$\(([\S]+?)\)/gi; 

    // Find all matched string in loaded data. 
    var result = reExtractScript.exec(data); 
    var allScript = ''; 

    if (result) 
    { 
     for (i = 0; i < result.length; i += 4) 
     { 
      // Remove current script from loaded script.   
      data = data.replace(result[i], ''); 

      // Replace all "$" function by adding context parameter that is control. 
      allScript += result[i+2].replace(reFindDollarSign, '$($1, "' + control + '")'); 
     } 
    } 

    // Load non-script html to control. 
    $(control).html(data); 

    // Evaluate all script that is found in loaded data. 
    eval(allScript); 
} 

// This script will partially download view page from server in the same domain 
$(function() 
{ 
    $.get(getUrl('~/Profile/Section/ViewEducation'), null, function(data) 
    { 
     // When partial loading is complete, all loaded data will be sent to “renderPartialView” function 
     renderPartialView('#education-view', data); 
    }); 
});

출처

2009-11-06 08:17:23

어때 대략 $('div[id^=placeholder]:last')?

Selectors/attrubuteStartsWith

출처

2009-11-05 11:53:31

정확히 무엇인지 모르겠습니다. 따라서 동적 로딩 스크립트에서는 모든 선택기에서 순서 개수를 지정할 수 없습니다. 또한 스크립트가 복잡해집니다. –

정확히 어떤 요소를 원하십니까? 어떻게 추가됩니까? the : last는 항상 요소의 마지막을 얻습니다. 요소의 색인을 필요로하지 않습니다. –

문서에서 정확하게 요소의 양과 위치 (처음, 마지막 또는 중간)를 알지 못합니다. 동적로드 때문에 많은 페이지에 내용이 표시됩니다. –

당신은 간단하게 얻을 수 $('.innerdiv:first')을 사용할 수 first 하나 $('.inner-div:last')이 last 하나를 얻을 수 있습니다. 또는 배수가 있고 특정 값을 선택하려는 경우 $('.inner-div:nth(x)') 여기서 x는 항목의 인덱스입니다.

출처

2009-11-05 11:57:39

최종 목표 또는 예상 솔루션이 무엇인지 설명하십시오. 복제 된 모든 요소를 숨기고 하나만 표시하도록 하시겠습니까? 일부 CSS 속성을 변경 하시겠습니까? 어떤 것을 선택해야하는지 결정하는 기준은 무엇입니까? –

가능한 해결책 1을 참조하십시오.이 질문에 대한 매우 일반적인 솔루션입니다. 동적 로딩 콘텐츠의 위치를 요구하지 않습니다. 이런 생각이야? –

자, 예제 HTML에 대해 이야기 해 보겠습니다. 자리 표시 자 클래스를 추가하고 나중에 편의를 위해 ID에 대시를 추가했습니다.나는 페이지에서이 같은 HTML의 미래의 모든 덩어리에이 이벤트를 원하는 경우

<div id="placeholder-1" class="placeholder"> 
    Dynamic Content will be placed inside this. 

    <div class="inner-div">baz</div> 
    <div class="div1">zip</div> 
    <a href="#" class="action">action</a> 
</div> 
<div id="placeholder-2" class="placeholder"> 
    Dynamic Content will be placed inside this. 

    <div class="inner-div">foo</div> 
    <div class="div1">bar</div> 
    <a href="#" class="action">action</a> 
</div>

지금은, 내가 $('.placeholder a.action').live('click', ...);

가이 코드는 이벤트를 첨부합니다 할 $('.placeholder a.action').bind('click', ...); 이러한 각 링크에 이벤트를 바인딩 할 수 있습니다 해당 링크 및 var 문을 ID 또는 <div> s 내부 텍스트를 캡처 할 수 있습니다. 이런 식으로 충돌하는 id 속성 값은 없지만 클래스 자리 표시자를 사용하여 div 안에있는 작업을 트래버스 할 수 있습니다.

$('.placeholder a.action').live('click', function(){ 
    // get the id 
    var id = $(this).parents('div.placeholder').attr('id').split('-')[1]; 
    // get the text inside the div with class inner-div 
    var inner_div = $(this).parents('div.placeholder').children('.inner-div').text(); 
    // get the text inside the div with class div1 
    var div1 = $(this).parents('div.placeholder').children('.div1').text(); 
    return false; 
});

출처

2009-11-06 08:53:28 artlung

당신의 대답은 나의 모범과 함께해야한다고 생각합니다. 그러나 귀하의 스크립트가 매우 복잡합니다. 나는 당신의 스크립트가 부모 문서에만 놓여야만한다고 생각한다. 때문에 다른 페이지에서 다시 사용할 수 없습니다. 제 대답을보세요. 어떤 생각이나 제안이 있습니까? –

제 질문을 명확히하기 위해 동적 로딩 페이지를 캘린더 또는 그리드보기와 같은 복잡한 컨트롤로 생각할 수 있습니다. 동일한 페이지에서 두 개 이상의 컨트롤을 가질 수 있습니다. 또한이 컨트롤은 모두로드되고 데이터가 클릭과 같은 사용자 동작에 의존 함을 보여줍니다. 따라서 사용하기 쉽고 재사용하기 쉬우 며 수정하기 쉬운 다음 세 가지 사항에 중점을 둔 내 질문을 해결하는 가장 좋은 방법은 아닙니다. 답변을 제안 해 주셔서 감사합니다. –

본인의 대본에 대한 귀하의 이의를 이해하지 못합니다. – artlung

jQuery를 사용하여 동적 로딩 페이지에서 중복 객체를 해결하는 방법은 무엇입니까?

답변

관련 문제