使用jQuery從具有相同類名的元素中獲取文本

我已經創建了一個有點拖放的應用程序。它工作正常，但有一個輕微的問題，我把物品拖到可丟棄的位置。使用jQuery從具有相同類名的元素中獲取文本

它應該從HTML文本（這是做），並更新另一個div來展示他們在已經拖了用戶。

不幸的是，它總是返回相同的名稱，無論哪個列表項你拖動。這是列表中的第一個，因此是該類的第一個實例。

無論如何，我們可以得到拖動項目的正確標籤？

這裏是我的jQuery

$(function() { 
    $(".drag_me").draggable({ revert: "invalid" }); 
    $(".choc2_bowl").droppable({ 
     drop: function(event, ui) { 
     $(this) 

      var htmlString = $('.choc_label').html(); 
      $('.choc2_flavour').text(htmlString); 

      ui.draggable.fadeOut(500); 
     } 
    }); 
    });

的這裏是我的HTML列表（這是縮短這個演示，但名單是從一個數據庫動態。

<div class="choc2_select"> 
<ul> 
<li class="drag_me"><div ><img src="RASPBERRY.png" /></div><div class="choc_label">Raspberries</div></li> 
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Strawberries</div></li> 
<li class="drag_me"><div ><img src="DRIED-BLUEBERRIES.png" /></div><div class="choc_label">Blueberries</div></li> 
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Cranberries</div></li> 
</ul> 
</div>

任何幫助將將不勝感激！

Simon

來源

2014-03-13 Simon Hume

var htmlString = $（this）.siblings（'。choc_label'）。html（）;這個可以嗎？ – Alen

感謝您的迅速回復，雖然這似乎只是什麼都不返回，div並沒有得到更新與'choc_label' –

您需要將目標設定爲choc_label裏面的拖動元素，所以使用

$(".choc2_bowl").droppable({ 
    drop: function (event, ui) { 
     var htmlString = ui.draggable.find('.choc_label').html(); 
     $('.choc2_flavour').text(htmlString); 
     ui.draggable.fadeOut(500); 
    } 
});

來源

2014-03-13 22:16:24

完美，作品像一個魅力，感謝阿倫 –

使用jQuery從具有相同類名的元素中獲取文本

回答

相關問題