주소 지정 jquery ui accordion 하위 div

Question

동적으로 생성 된 아코디언과 고객 데이터가있는 페이지가 있습니다. 아코디언의 h3 헤더에서 나는 아약스 요청에 대한 데이터를 얻을 수 있습니다. 문제는 모든 아코디언에는 "pcom"클래스에 속하는 div가 있습니다. 특정 "pcom"클래스 div를 어떻게 처리 할 수 ​​있습니까? 스팬은 헤더의 자식이므로 .find()를 사용하여 헤더에서 데이터를 가져올 수 있습니다. h3 헤더의 자식이 아니기 때문에 내 div를 처리 할 때는 작동하지 않습니다. 어떤 아이디어? 요청에 대한

내 JS :

$("#accordion").accordion({ 
       collapsible: true, 
       active: false, 
       header: "h3", 
       heightStyle: "content", 
       activate: function() { 

       var claddress = $('.ui-accordion-header-active').find("span.claddress").text(); 
       var clcity = $('.ui-accordion-header-active').find("span.clcity").text(); 
       var clprov = $('.ui-accordion-header-active').find("span.clprov").text(); 

       //if there is no claddress don't bother - (for accordion activate on close) 
       if (claddress == '') { 
        //nothing there so do nothing 
        return; 
       } 
       //if we do have something check the pcom db for a match 
       $.ajax({ 
        url: "commenter.php", 
        datatype: "json", 
        data: { 
         clAddress: claddress, 
         clCity: clcity, 
         clProv: clprov 
        }, 
        success: function(data) { 
         //we have a match now show it 
         //THIS IS WHERE I NEED TO ADDRESS THE pcom DIV IN THE ACCORDION 
        } 
       }); 

      } 
      }); 

편집 :이 아코디언

    success: function(data) { 

       if(data == 'null') { 
       buildaccordion("<h3>No Results Found</h3><div>No Data to Show.</div>"); 
       return; 
       } 

       var hbuild=''; 
       var tmp = $.parseJSON(data); 
       //run a loop to build the HTML for each record 
       $.each(tmp, function(i) { 
        //Header 
        hbuild += '<h3 class="sTitle">' + tmp[i].Name + ' - <span class="claddress">' + tmp[i].Address + '</span>, <span class="clcity">' 
        + tmp[i].City + '</span>, <span class="clprov">' + tmp[i].Prov + '</span> - ' + tmp[i].CallInTime + '</h3>'; 

        //Inner 
        hbuild += "<div>"; 
        hbuild += '<ul class="menu">'; 
        hbuild += '<li><a href="newcall.php?CustID=' + tmp[i].CustID + '">New Call</a></li>'; 
        hbuild += '<li><a href="editcall.php?CustID=' + tmp[i].CustID + '">Edit Call</a></li>'; 
        hbuild += '<li><a href="viewcall.php?CustID=' + tmp[i].CustID + '">Details</a></li>'; 
        hbuild += '</ul>'; 
        hbuild += '<div class="spcom">Persistent Comment Here</div>'; 
        hbuild += '<div class="acname">Name: ' + tmp[i].Name + ' - <span class="ClientCust">Customer Num:' + tmp[i].ClientCustNum + '</span></div>'; 
        hbuild += '<div class="acphone">Phone: ' + tmp[i].Phone + ' Ext#:' + tmp[i].PExt + '</div>'; 
        hbuild += '<div class="acaddress">Address: ' + tmp[i].Address + ', ' + tmp[i].City + ', ' + tmp[i].Prov + ', ' + tmp[i].PCode + '</div>'; 
        hbuild += '<div class="accontact">Contact: ' + tmp[i].Contact + '</div>'; 
        hbuild += '<span class="acbilledto">Billed To: ' + tmp[i].BilledTo + '</span><br>'; 
        hbuild += '<div class="acponum">PO Num: ' + tmp[i].PONum + '</div>'; 
        hbuild += '<div class="acourpo">OurPO: ' + tmp[i].OurPO + '</div>'; 
        hbuild += '<div class="acgivento">Service Provider: ' + tmp[i].GivenTo + '</div>'; 
        hbuild += '<div class="acourwo">Accurate WO: ' + tmp[i].OurWO + '</div>'; 
        hbuild += '<div class="acourinv">Accurate Invoice: ' + tmp[i].OurInv + '</div>'; 
        hbuild += '<div class="acinvamt">Invoice Total: $' + tmp[i].InvAmt + '</div>'; 
        hbuild += '<div class="accomments">Call Comments: ' + tmp[i].Comments + '</div>'; 
        hbuild += "</div>"; 
       }); 
       //send it off to the build 
       buildaccordion(hbuild); 
       } 

는 이제 ID를 추가 할 수 있습니다 (아약스의 단지 성공 부분 표시) 구축 방법입니다 (고객 ID와 같이) 생성되었을 때 pcom div에 고유 한 식별자가 포함되어 있지만 h3 헤더에 id가있는 경우 해당 ID를 h3 헤더에 넣은 다음 참조하십시오 div. 그러나 나는 아코디언의 태그에 많은 양의 데이터를 숨기지 않고이 작업을하고 싶습니다. 나는 다른 페이지에서 그렇게해야만했고, 혼란스럽고 지저분 해졌습니다. 어떤 도움

감사합니다, Norst

Answer 1

과 같이 표준 HTML 구조를 가정 :

<h3><span>Section 1</span></h3> 

<div> 
    <p> 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
</div> 

그리고 개별적 H3 요소를 타겟팅 가정, 당신은 사용하십시오 :

$(this).next('div'); 

일치하는 클래스가있는 스팬에서 해당 div를 가져와야하는 경우 다음과 같습니다.

$(this).parent('h3').next('div');