如何區分同一類HTML存在於兩個不同的div

-1

<html> 
    <head> 
    <script type="text/javascript" src="js/accordian/jquery-1.9.1.js"> 
    </script> 
    <script type="text/javascript"> 


$(document).on("click", ".checkboxclas", function(e) { 
    var divdata = $("div.activateUiHTML").html(); 
    $("#ordersdiv").prepend(divdata); 
$("#ordersdiv .Topping-details").hide(); 
    }); 


</script> 
</head> 

<body> 
    <div class="activateUiHTML" data-role="collapsible"> 
    <div class="prd-items-detials"> 
     <form><input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="59" > 
     <label class="testtt" for="checkbox-mini-0">Ice Cream Butter Scotch</label> 
     </form> 
     <div class="Topping-details" id="59"> 
     <section id="topping_tsection_59"> 
      <i id="topping-close"></i> 
      <aside> 
       <section class="secclass"><a href="#">Honey with Chocolate Sauce 10 ML</a></section> 
      </aside> 
     </section> 
     </div> 
    </div> 
    </div> 
    <div id="ordersdiv"></div> 
</body> 

</html>

當上的複選框點擊，我有我我將數據追加到div偵聽器叫ordersdiv 和隱藏與類元素「摘心 - 詳細「僅當它們是」ordersdiv「元素的子元素時。如何區分同一類HTML存在於兩個不同的div

現在我很震驚這個地方。

我已經得到了.Topping-細節聽衆如下圖所示，其在工作中都是通用的訂單股利和股利activateUiHTML

$(document).on("click", ".Topping-details", function() 
{ 

    alert('ddd'); 

});

我怎樣才能diferentiate點擊下ordersdiv爲.Topping-細節目前事件下activateUiHTML DIV .Topping-細節

http://jsfiddle.net/e56TY/2/

來源

2014-06-19 Pawan

你可以用'。最近（）'找到父母，然後檢查其長度，如http://jsfiddle.net/CLU5y/ – Satpal

$(document).on("click", "#ordersdiv .Topping-details", function(){ 
    alert('ddd'); 
});

和

$(document).on("click", ".activateUiHTML .Topping-details", function(){ 
    alert('aaa'); 
});

附： ID不應該以數字開頭！

來源

2014-06-19 06:45:01

1.您缺少'＃'with'ordersdiv'和'.activateUiHTML' 2. HTML5中的ID可以以編號 – Satpal

謝謝你的糾正！ ;） –

您可以查看最近orderdiv長度：

if($(this).closest('#ordersdiv').length){ 
    //in order div 
}

Working Demo

來源

2014-06-19 06:45:33

非常感謝，我整晚都在想如何解決這個問題，專家們在幾分鐘內解決了這個問題。再一次感謝你。 – Pawan

@PreethiJain：很高興它有幫助。 –

Updated Demo

檢查這一點，

$(document).on("click", ".Topping-details", function() 
{ 
    if($(this).parents('#ordersdiv').length){ 
     alert('ordersdiv') 
    } 
    else{ 
     alert('activateUiHTML') 
    } 
});

您必須檢查當前點擊的.Toppping-details是否有父母名稱ordersdiv。

爲此使用$(this).parents('#ordersdiv').length。 length將返回0，如果它不存在。

參考：

.parents()：獲取specifed祖先。
.length：Get no。的元素。

來源

2014-06-19 06:47:15

您可以使用.closest()找到父然後檢查其長度

代碼

$(document).on("click", ".Topping-details", function() { 
    var ordersdiv = $(this).closest('#ordersdiv').length; 
    var activateUiHTML = $(this).closest('div.activateUiHTML').length; 

    if (ordersdiv) { 
     alert('Under ordersdiv'); 
    } 
    if (activateUiHTML) { 
     alert('Under activateUiHTML'); 
    } 
});

DEMO

來源

2014-06-19 06:48:57 Satpal

如何區分同一類HTML存在於兩個不同的div

回答

相關問題