Question

我想在每次点击时交换div。但是它只在第一次点击时交换。

function SwapDivsWithClick() {
  $('#swapper-other').each(function() {
    if (!$(this).text().match(/^\s*$/)) {
      $(this).insertBefore($(this).prev("#swapper-first"));
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
  <p style="margin:0; color:red;">
    This div displayed when the web page first loaded.
  </p>
</div>
<div id="swapper-other" style="display:block; border:2px dotted blue; padding:25px;">
  <p style="margin:0; color:blue;">
    This div displayed when the link was clicked.
  </p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
  <a href="javascript:SwapDivsWithClick()">(Swap Divs)</a>
</p>

Answer 1

您不需要使用DeleteByQueryRequestBuilder deleteByQueryRequestBuilder = DeleteByQueryAction.INSTANCE.newRequestBuilder(transportClient) .filter(QueryBuilders.matchAllQuery()) .source(indexName); BulkByScrollResponse response = deleteByQueryRequestBuilder .filter(QueryBuilders.matchAllQuery()).get()，因为您的选择器包含一个元素。因此，请使用底部代码。

在一个选择器中选择.each()和#swapper-first，然后首先使用#swapper-other获取哪个选择，然后使用.first()在另一个选择器之前插入所选元素。

.before()

function SwapDivsWithClick() {
    $('#swapper-first, #swapper-other').first().before(function(){
    	return $(this).next();
    });
}

Answer 2

这是一个有效的示例：类别为div的最后一个swapIt设置为类别div的第一个swapIt之前。

我所做的：我给每个div上了swapIt类。在函数中，该类的最后一个元素（:last）被推到该类（swapIt）的第一个元素上。

function SwapDivsWithClick() {
  $('.swapIt:last').insertBefore($('.swapIt:first'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" class="swapIt" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
     </p>
</div>
<div id="swapper-other" class="swapIt" style="display:block; border:2px dotted blue; padding:25px;">
    <p style="margin:0; color:blue;">
        This div displayed when the link was clicked.
    </p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
   <a href="javascript:SwapDivsWithClick()">(Swap Divs)</a>
</p>

使用类的方法的优点是您可以拥有两个以上的div，并且每次单击按钮时，最后一个div就会推到第一个div之上。即使使用5、7或10，它仍然可以工作！

如何使用jQuery分别在按钮单击上交换两个div？

2 个答案: