如何让“节点树”和“节点”的“选中”同时对应执行？

Question

如何让“节点树”和“节点”的“选中”同时对应执行？demo：http://test.your-dede.info/wt/node_tree.htm图片说明：
代码：<style type="text/css">
.selected,.current_node{border:1px solid red;}
.node_tree div{width:100px;background:#FFDAB9;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function smart_tree(){
$(".node_tree div").click(function (e){
var $clicked=$(e.target);
$clicked.toggleClass("current_node");
//如何让node_content里面对应的节点加执行toggleClass("current_node");
//........
});
} 
$(function(){smart_tree();});
</script><div class="node_tree">
<ul>
<li>
<div><span>ul</span></div>
<ul>
<li>
<div class="current_node"><span>li</span></div>
<ul class="current_child">
<li><div><span>a</span></div></li>
</ul>
</li>
<li><div><span>li</span></div></li>
<li><div><span>li</span></div></li>
<li><div><span>li</span></div></li>
</ul>
</li>
</ul>
</div><div class="node_content">
<ul>
<li class="selected"><a href="#">刚果(金)大规模强奸案</a></li>
<li><a href="#">赵本山限制小沈阳露面</a></li>
<li><a href="#">林志玲尽显东方美</a></li>
<li><a href="#">王珞丹被曝闪婚离异</a></li>
</ul>
</div>

Answer 1

    function smart_tree(){
        $(".node_tree div span, .node_tree div li").click(function (e){
            var $clicked=$(e.target);
            $clicked.toggleClass("current_node");
            //如何让node_content里面对应的节点加执行toggleClass("current_node");
            //........
        });
    } 

Answer 2

我的意思是点击node_tree上的div时，根据点击的节点树目标查询到node_content里面的对应节点，给该节点加上selected

Answer 3

<style type="text/css">
    .selected,.current_node{border:1px solid red;}
    .node_tree div{width:100px;background:#FFDAB9;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    function smart_tree(){
      
            $(".node_tree ul li ul li").click(function(){
$(this).toggleClass("current_node");
            $('.node_content ul li').eq($(this).index()).toggleClass('selected');
});      
    };
var ind;
$(function(){smart_tree();});
</script><div class="node_tree">
    <ul>
        <li>
            <div><span>ul</span></div>
            <ul>
                <li>
                    <div><span>li</span></div>
                    <ul class="current_child">
                        <li><div><span>a</span></div></li>
                    </ul>
                </li>
                <li><div><span>li</span></div></li>
                <li><div><span>li</span></div></li>
                <li><div><span>li</span></div></li>
            </ul>
        </li>
    </ul>
</div><div class="node_content">
    <ul>
        <li><a href="#">刚果(金)大规模强奸案</a></li>
        <li><a href="#">赵本山限制小沈阳露面</a></li>
        <li><a href="#">林志玲尽显东方美</a></li>
        <li><a href="#">王珞丹被曝闪婚离异</a></li>
    </ul>
</div>
看看这个可否??

Answer 4

function smart_tree(){
var arr=[];
arr["tree"]=[];
arr["tree"]["p"]=$(".current_node").parent().parent().parent().parent().children();
arr["tree"]["s"]=$(".current_node").parent().parent().children();
arr["tree"]["c"]=$(".current_node").next().children();
arr["con"]=[];
arr["con"]["p"]=$(".selected").parent().parent().children();
arr["con"]["s"]=$(".selected").parent().children();
arr["con"]["c"]=$(".selected").children();

function smart_tree_fn(what){
$.each(arr["tree"][what],function(i,n){
$(n).click(function (e){
$(n).children("div").toggleClass("current_node");
arr["con"][what].eq(i).toggleClass("selected");
e.stopPropagation();
});
});
}
smart_tree_fn("p");
smart_tree_fn("s");
smart_tree_fn("c");
};

Answer 5

你这个node_tree和node_content没有规律啊，有什么对应的条件么

Answer 6

   上面4个内包的<li>对应着下面4个<li>元素
   楼主是这个意思吧！
   如果是，那看来我越来越聪明了，不要楼主说我就能猜到楼主的意思了！
   呵呵，见笑了！