Javascript 如何使用jquery对事件中的元素排序
我有一种情况,我想根据一个事件定位某些元素。例如:Javascript 如何使用jquery对事件中的元素排序,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我有一种情况,我想根据一个事件定位某些元素。例如: <div id="leftBox"> <div class="green">GREEN</div> <div class="blue">BLUE</div> <div class="red">RED</div> </div> <div id="rightBox"> <div class="gre
<div id="leftBox">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="red">RED</div>
</div>
<div id="rightBox">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="red">RED</div>
</div>
绿色
蓝色
红色
绿色
蓝色
红色
绿色
蓝色
红色
绿色
蓝色
红色
当我将鼠标悬停在#leftBox.green上时,我希望#rightBox中的所有元素顶部都有.green,如:
<div id="rightBox">
<div class="green">GREEN</div>
<div class="green">GREEN</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="red">RED</div>
<div class="blue">BLUE</div>
<div class="red">RED</div>
<div class="blue">BLUE</div>
<div class="red">RED</div>
</div>
绿色
绿色
绿色
蓝色
红色
蓝色
红色
蓝色
红色
和.blue和.red一样,尝试以下方法:
var main, address;
$('#leftBox div').mouseenter(function() {
address = $(this).attr('class');
var stack = [],
tmp = [],
total = [];
main = $('#rightBox div').clone(true);
stack = $('#rightBox div.'+ address +'').remove();
tmp = $('#rightBox div');
total = $.merge(stack, tmp);
$.each(total,
function() {
$(this).appendTo('#rightBox').show();
})
}).mouseout(function() {
$('#rightBox').empty().append(main);});
这也很好,你可以在这里查看演示
如果要保留其他元素的顺序,请尝试以下操作
$(document).ready(function(){
$("div#leftBox div").mouseover(function(){
main = $('#rightBox div').clone(true);
$("div#rightBox ."+$(this).attr('class')).each(function() {
$("div#rightBox").prepend($(this));
});
}).mouseout(function() {
$('#rightBox').empty().append(main);});
});
我尝试了一些东西。请检查它,朋友。朋友,如果这个解决方案对你有效,你应该把它作为答案。
$(document).ready(function(){
$("div#leftBox div").mouseover(function(){
main = $('#rightBox div').clone(true);
$("div#rightBox ."+$(this).attr('class')).each(function() {
$("div#rightBox").prepend($(this));
});
}).mouseout(function() {
$('#rightBox').empty().append(main);});
});