Question

我有以下内容：

<div id=box1>
    <div id='1' class='product' style=""></div>
    <div id='2' class='product' style="display: none;"></div>
    <div id='3' class='product' style="display: none;"></div>
</div>
<div id=box2>
    <div id='4' class='product' style=""></div>
    <div id='5' class='product' style="display: none;"></div>
    <div id='6' class='product' style="display: none;"></div>
</div>
<div id=box3>
    <div id='7' class='product' style=""></div>
    <div id='8' class='product' style="display: none;"></div>
    <div id='9' class='product' style="display: none;"></div>
</div>

我想要做的是专门使用特定框中的元素并忽略所有其他元素。

我知道我需要使用子元素，这就是我现在所拥有的：

 $( "some-click-event" ).click(function() {
     var boxid = $(this).data("boxid"); //taken from the clicked element

        //Now I want to work exclusively with the particular box

        $("#" + boxid).children(function() {
            //Now I need to recurse through each box element  
            $( ".product" ).each(function( index ) {
                //Toggle display
            });
        });

    });

所以我的问题是：我如何定位特定的盒子ID？

Answer 1

您可以使用find方法：

$("#box" + boxid).find( '.product' ).each(function() {
    //Toggle display 
    $( this ).toggle();
});

Answer 2

您可以在选择器中使用产品的boxid +类：

$( "some-click-event" ).click(function() {
 var boxid = $(this).data("boxid"); //taken from the clicked element

    //Now I need to recurse through each box element  
     $("#" + boxid + " .product" ).each(function( index ) {
        //Toggle display
     });
});

Answer 3

你应该可以选择这样的产品：

$("#box" + boxid + " > .product").toggle();

除非这是一个错字，否则不会根据您的选择选择任何内容 HTML：

$("#" + boxid).children(function() {

即使你是在循环子女的环境中先前选择的元素，这将选择所有元素即使他们不是孩子，也可以上课product 迭代元素。

$( ".product" ).each(function( index ) {

Jquery - 查找子id的类

3 个答案: