Find an item in a context with jQuery_问答_开发者

开发者 https://www.devze.com 2022-12-16 12:12 出处：网络

I have this code in JS to jQuery: <!DOCTYPE html> <html> <head> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></s

相关专题：jquery

I have this code in JS to jQuery:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <title>test</title>
</head>
<body>

    <ul id="ul1">
            <li id="li11">11</li>
            <li id="li12">12</li>
            <li id="li13">13</li>
    </ul>

    <ul id="ul2">
            <li id="li21">21</li>
            <li id="li22">22</li>
            <li id="li23">23</li>
    </ul>

    <pre id="result"></pre>

</body>
</html>
<script>
$(function(){

    var liFind = $("#li21");
    var liFindDoc = document.getElementById("li21");

    var ul1 = $("#ul1");
    var ul2 = $("#ul2");

    $("#result").append( "li exist: "+$(liFind开发者_如何学JAVA).length+", "+$(liFind).html()+"<br />");

    $("#result").append( "find ul 1 : "+$(ul1).find(liFind).length+"<br />");
    $("#result").append( "find ul 2 : "+$(ul2).find(liFind).length+"<br />");

    $("#result").append( "children ul 1 : "+$(ul1).children(liFind).length+"<br />");
    $("#result").append( "children ul 2 : "+$(ul2).children(liFind).length+"<br />");

    $("#result").append( "filter ul 1 : "+$(ul1).filter(liFind).length+"<br />");
    $("#result").append( "filter ul 2 : "+$(ul2).filter(liFind).length+"<br />");

    $("li").each(function(i,val){
        $("#result").append("li "+$(val).attr("id")+": "+(liFind==val)+" - "+(liFindDoc==val)+"<br />");

    });

    $(ul1).children().each(function(i,val){
        $("#result").append("children II ul 1 : "+(liFind==val)+" - "+(liFindDoc==val)+"<br />");
    });

    $(ul2).children().each(function(i,val){
        $("#result").append("children II ul 2 : "+(liFind==val)+" - "+(liFindDoc==val)+"<br />");
    });

    $(ul1).find("li").each(function(i,val){
        $("#result").append("find II ul 1 : "+(liFind==val)+" - "+(liFindDoc==val)+"<br />");
    });

    $(ul2).find("li").each(function(i,val){
        $("#result").append("find II ul 2 : "+(liFind==val)+" - "+(liFindDoc==val)+"<br />");
    });

$("#result").append("'SOLUTION' ::: closest li->ul: "+ $(liFind).closest('ul').attr("id") +"<br />");


});
</script>

and get this result:

li exist: 1, 21

find ul 1 : 0

find ul 2 : 0

children ul 1 : 3

children ul 2 : 3

filter ul 1 : 0

filter ul 2 : 0

li li11: false - false

li li12: false - false

li li13: false - false

li li21: false - true

li li22: false - false

li li23: false - false

children II ul 1 : false - false

children II ul 2 : false - true

children II ul 2 : false - false

find II ul 1 : false - false

find II ul 2 : false - true

find II ul 2 : false - false

'SOLUTION' ::: closest li->ul: ul2

Question How can I tell if an element is in a context, for example in the case above, as whether a "li" is in a "ul"? with jQuery using a method such as "find".

The second parameter of your selector is reserved for a context:

$("ul", "body").length; // how many UL's are within the body?

Of course that's more complicated than just making a more detailed selector:

$("body ul").length; // how many UL's are within the body?

Additionally, you can always query the parents:

$("ul").parents("body").length; // is a BODY up there?

Using "find" can be like this:

$("ul").find("li").length; // how many LI's (included grandchildren) within UL?

I would use closest() to find parent context, unless you can do it in the selector.

$('#li22').closest('ul').length;

or as a plugin:

$.fn.context = function(context) {
  return !!$(this).closest(context).length;
};

console.log( $('#li22').context('kbd') ); // prints false

Find an item in a context with jQuery

精彩评论

关注公众号

热门标签

图文推荐

Find an item in a context with jQuery

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：