如何使用jQuery創建絕對位於其他元素旁邊的div？

我在頁面上有一個搜索框，它連接到一個AJAX腳本，該腳本根據搜索框的內容通過GET返回HTML。如何使用jQuery創建絕對位於其他元素旁邊的div？

爲了在搜索框的正下方顯示結果，我需要在相對於該框的位置創建一個div（該框的位置根據屏幕分辨率而變化）。我如何使用jQuery來實現這一目標？

另外，可以使用jQuery UI自動完成，而如果是這樣，如何？我確實有一個bash，但無法讓它顯示HTML。

編輯： 這裏是一個的jsfiddle鏈接： http://jsfiddle.net/UxPb8/

你可以原諒的思考它的工作原理，但只要有網頁搜索框左側的更多的東西，定位是拋出，因此這個問題。

2010-10-01 bcmcfc

如果你發佈你的jQuery函數和頁面的相關部分的html，我們可能會提供比猜測更好的答案。順便提一下，[jsbin]（http://jsbin.com/）和http://jsfiddle.net都是免費且易於使用的，用於發佈代碼的現場演示。 – 2010-10-01 12:27:09

我落得這樣做這個：

//calculate the position 
var parentDiv = $(this).parents(selector); 
var top = parentDiv.position().top + parentDiv.height(); 
var left = $("#wrapper").width()-427; //427 is a fixed offset - it's still in the right place for any screen res 

//run the search 
$.ajax({ 
    url: 'ajax/find.php', 
    data: { search: $(this).val() }, 
    success: function(data) { 
     $("#globalFindResults") 
      .css({ 
       'position': 'absolute', 
       'top': top, 
       'left': left 
       }) 
      .html(data) 
      .slideDown('fast'); 
    } 
});

來源

2010-10-06 07:01:38 bcmcfc

假設您的搜索框位於名爲「搜索」的div中。

然後你可以使用jQuery的after功能追加到您的html：

$('#search').after(html);

如果你要創建的「格」是不退還的HTML的一部分，這是很容易將其插入：

$('#search').after("<div>" + html + "</div>");

來源

2010-10-01 12:27:25 sje397

這樣的..（返回後HTML）

$('.classNameORID').append("<div style='position:relative;'>"+ data +"</div>");

來源

2010-10-01 12:28:32 Oyeme

追加會將div及其內容插入到搜索框的CONTENTS的末尾，而不是之後。這就是爲什麼@ sje397有正確的答案。另外，.classNameORID不是一個好例子，因爲這個點只能用於類名。除此之外，相當不錯。 – 2010-10-01 12:35:54

是的，我的意思是.classNameORID它僅用於類，＃用於ID。 – Oyeme 2010-10-01 12:56:56

如何使用jQuery創建絕對位於其他元素旁邊的div？

回答

相關問題