javascript - 如何使用 id/class 将元素放置在其他元素旁边？

Question

我想将搜索元素放置在元素“媒体标题 1”或“媒体标题 2”旁边(相对于其 id/类)。

例如:

考虑一下，我有一个类为“media-item-1”的元素，我想通过使用其类“media-item-1”将搜索 div 放置到该元素旁边。将来它应该是动态的，我想通过更改目标元素 id/class 来更改位置。

<div class="content">
    <div class="media-item-1 col-md-8 col-sm-8 col-xs-8">
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">Media heading 1</h4>
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
            </div>
        </div>
    </div>    
</div>

<div class="sidebar-second">
    <div class="form-item-search col-md-4 col-sm-4 col-xs-4">
      <label for="search">Search</label>
      <input type="text" id="search"  size="15" maxlength="60">
    </div>
</div>

有没有办法使用 bootstrap/jquery 来做到这一点？

这是 jsbin 中的代码

Answer 1

这是一个例子。根据指定的id设置元素的div顶部。

  <div class="sidebar-second" style="position:absolute;">
    <div class="form-item-search col-md-4 col-sm-4 col-xs-4" style="width: 250px;">
      <label for="search" style="float:left;" >Search</label>
      <input type="text" id="search"  size="15" maxlength="60" style="float:left;">
    </div>
  </div>

 </div>
 <div><input type="button" value="SetMe" id="setme" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"></div> 
 </div>

<script>
$( "#setme" ).click(function(){
   var setbutton = $( ".media-item-1" );
   var position = setbutton.position();
   $(".sidebar-second").css({top: position.top, left: 200, position:'absolute'});
});
</script>