开发者

jquery help selecting parents and children at the same time, but not siblings of ancestors

I'm trying to write a jquery call to select the "children" and the "parents" of a checkbox ul menu when the user checks the box.

This jquery selects the parents and the children properly, but it's also selecting the siblings when traversing up through the parents.

//Check the Parents
$(this).parents().find("input").checkUncheck(true);


//Check the Children
$(this).parent().siblings("ul").find("input").checkUncheck(true);

I don't want it to select the siblings when traversing the ancestors to select the "parents", but I don't know how to do the jquery. If anyone has some tips on how to do this I woudld be grateful!

Thanks.

Heres the HTML:

<ul id="p_menu_nav">
    <li>    
        <span>
            <input type="checkbox" title="no"> 
            <img images/minus.gif" class="a_hand"> Wells Fargo
        </span>
        <ul >
            <li >
                <span>
                    <input type="checkbox" title="no"> 
                    <img src="images/plus.gif" class="a_hand"> Southern 开发者_开发问答Utah
                </span>
            </li>
            <li >
                <span>
                    <input type="checkbox" title="no"> 
                    <img src="images/plus.gif" class="a_hand"> Northern Utah
                </span>
            </li>
            <li >
                <span>
                    <input type="checkbox" title="no"> 
                    <img images/minus.gif" class="a_hand"> Central Utah
                </span> 
                <ul >
                    <li>
                        <input type="checkbox" name="approved_property_id_list" id="4835">Apartment 1
                    </li>
                    <li>
                        <input type="checkbox" name="approved_property_id_list" id="4844">Apartment 10
                    </li>
                    <li>
                        <input type="checkbox" name="approved_property_id_list" id="4934">Apartment 100
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>


Try something like this:

    $(this).parents('li').find("> span > input").checkUncheck(true);

    //Check the Children
    $(this).closest('li').find('input').checkUncheck(true);

JSFiddle Example


Try this :)

$(function(){
    $("#p_menu_nav input").click(function(){
        var that = "#"+this.id;
        $("#p_menu_nav li:has(img)").each(function(){
            if($(this).contents().find(that).length > 0){
                $(this).find(">span input").attr("checked",true);
            }
        });
    });
});
  1. Click function - just for testing
  2. Remember the id of clicked element
  3. Selecting all branches (I assumed all your branches has img, but it could be also span)
  4. Checking if in clicked is in this branch
  5. If YES then checking checkbox (You have used function checkUncheck(true))
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜