如何shift + click多选节点？

Question

如何shift + click多选节点？要往上往下选都能实现，<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function shift_select(){
$(".box *").click(function (e){
if(e.shiftKey){
//按shift+click实现多选，像选记事簿选文本那功能怎么实现？
//即由当前的selected元素一直到点选的那个节点，之间的全部节点加.selected
}else{
$(this).toggleClass("selected");
}
});
}
$(function(){
shift_select();
});
</script><style type="text/css">
.selected{background:tan;}
</style>
<div class="box">
<p>hello</p>
<p>hello</p>
<div>i am div</div>
<p>hello</p>
<br>
<p>hello</p>
<p>hello</p>
<p class="selected">hello</p>
<p>hello</p>
<p>hello</p>
<h2>i am h2</h2>
<p>hello</p>
<p>hello</p>
</div>

Answer 1

大致是不是这个意思啊<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var k;
function shift_select(){
$(".box *").click(function (e){
if(e.shiftKey){
//按shift+click实现多选，像选记事簿选文本那功能怎么实现？
//即由当前的selected元素一直到点选的那个节点，之间的全部节点加.selected
if(k){
for(var i = k; i <= this.id; i++){
if(i != k)$("#" + i).toggleClass("selected");
}
}
}else{
$(this).toggleClass("selected");
}
if(this.className == "selected"){
k = this.id;
}else{
k = null;
}
});
}
$(function(){
shift_select();
});
</script><style type="text/css">
    .selected{background:tan;}
</style>
<div class="box">
    <p id="1">hello</p>
    <p id="2">hello</p>
    <div id="3">i am div</div>
    <p id="4">hello</p>
    <br>
    <p id="5">hello</p>
    <p id="6">hello</p>
    <p id="7" class="selected">hello</p>
    <p id="8">hello</p>
    <p id="9">hello</p>
    <h2 id="10">i am h2</h2>
    <p id="11">hello</p>
    <p id="12">hello</p>
</div>

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var k;
function shift_select(){
$(".box *").click(function (e){
if(e.shiftKey){
if(k){
if(k < this.id){
for(var i = k; i <= this.id; i++){
if(i != k)$("#" + i).toggleClass("selected");
}
}else{
for(var i = k; i >= this.id; i--){
if(i != k)$("#" + i).toggleClass("selected");
}
}
}
}else{
$(this).toggleClass("selected");
}
if(this.className == "selected"){
k = this.id;
}else{
k = null;
}
});
}
$(function(){
shift_select();
});
</script><style type="text/css">
    .selected{background:tan;}
</style>
<div class="box">
    <p id="1">hello</p>
    <p id="2">hello</p>
    <div id="3">i am div</div>
    <p id="4">hello</p>
    <br>
    <p id="5">hello</p>
    <p id="6">hello</p>
    <p id="7" class="selected">hello</p>
    <p id="8">hello</p>
    <p id="9">hello</p>
    <h2 id="10">i am h2</h2>
    <p id="11">hello</p>
    <p id="12">hello</p>
</div>