Question

我正在开发一个包含复杂代码的项目，这是一个简单的原型：

<div id="1"></div>
<div id="2" style="disply:none"></div>
<div id="3"></div>
<div id="4" style="disply:none"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8" style="disply:none"></div>

<button>Test</button>

现在，这是一个场景。

如果我点击测试按钮，那么例如， id = 4 的 div 应显示，但在 id = 7 之后。

onclick 按钮，找到包含4的ID并显示为倾斜 - 这些已完成。

只是找到一种方法在div = id = 7 之后将这些div 与id = 4放在一起。

欢迎JavaScript和jQuery代码。提前谢谢！

Answer 1

您可以使用insertAfter()

执行此操作

演示：https://jsfiddle.net/be06q7de/

$('button').click(function(){
    $('#4').fadeIn().insertAfter($('#7'));
})

Answer 2

尝试以下代码。

$（ '＃4'）。insertAfter（ '＃7'）。显示（）

Answer 3

您也可以将CSS与Flex和订单一起使用：

＆＃13;

body {
  display:flex;
  flex-flow:column
}
div[id] {
  order:-1;
  color:green
}
div#a4 {
  order:1;
  color:red;
}

＆＃13;

<div id="a1">1</div>
<div id="a2" >2</div>
<div id="a3">3</div>
<div id="a4" >4</div>
<div id="a5">5</div>
<div id="a6">6</div>
<div id="a7">7</div>
<div id="a8">8</div>

＆＃13;

注意：不应使用用作ID名称或Classname的单个数字。请参阅下面的代码段，但是您的ID

＆＃13;

body {
  display:flex;
  flex-flow:column
}
div[id] {
  order:-1;
  color:green
}
div#4 {
  order:1;
  color:red;
}

＆＃13;

<div id="1">1</div>
<div id="2" >2</div>
<div id="3">3</div>
<div id="4" >4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
<div id="8">8</div>

＆＃13;

Answer 4

您可以使用 JQuery 来达到目的。

＆＃13;

$('#test').on('click',function(){
$('#4').insertAfter($('#7'))
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
<div id="8" >8</div>

<button id='test'>Test</button>

＆＃13;

P.S：您也可以根据需要动态编写代码，方法是将它们与类和HTML5属性一起使用。

显示Div但在特定位置

4 个答案: