2013-12-17 73 views
0

我有一個頁面,其中包含一個動態創建的手風琴與客戶數據。在手風琴的h3頭文件中,我可以從我的ajax請求中獲取數據。問題在於,所有的手風琴都有屬於「pcom」類的手風琴。我如何處理特定的「pcom」分類div?我可以使用.find()從頭獲取數據,因爲跨度是標題的子節點。這不適用於我的div,因爲它們不是h3標題的子節點。有任何想法嗎?尋找jquery ui accordion child 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在創建時在pcom div中包含唯一標識符(如客戶ID),但這樣做也會在h3標題中產生一個標識,因此它會在h3標題中獲取標識,然後引用div。但我想這樣做,而不會在手風琴的標籤中隱藏大量數據。我必須在另一頁上做到這一點,它變得混亂和混亂。

感謝您的幫助, NORST

+0

一段HTML代碼會很有用。 – isherwood

+0

再次,HTML。所有JS只是混淆了事情。這是DOM遍歷的一個基本問題。 – isherwood

回答

0

假設像這樣標準的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'); 
+0

備用我們一些時間精神分析所有這些,並告訴我們你從哪裏開始。班級上的班級價值? – isherwood

+1

非常感謝!爲了得到你所說的話,我不得不多看幾次。回答我的問題是使用:$('。ui-accordion-header-active')。next('div')。find('div.spcom')。html(我需要DIV); – Norst