Question

这是我的HTML，

<div id="first">
    <div class="block_title">item1</div>
    <div id="first_block_1">
        <div class="sub_block_1">block content 1_1</div>
        <div class="sub_block_2">block content 2_1</div>
        <div class="sub_block_3">block content 3_1</div>
    </div>
</div>

<div id="second">
    <div class="block_title">item2</div>
    <div id="second_block_1">
        <div class="sub_block_1">block content 1_2</div>
        <div class="sub_block_2">block content 2_2</div>
        <div class="sub_block_3">block content 3_2</div>
    </div>
</div>

<div id="third">
    <div class="block_title">item3</div>
    <div id="third_block_1">
        <div class="sub_block_1">block content 1_3</div>
        <div class="sub_block_2">block content 2_3</div>
        <div class="sub_block_3">block content 3_3</div>
    </div>
</div>

所以，我想隐藏这个HTML的特定子div。

在第一个块中，＆＃34; sub_block_1＆＃34;将被隐藏。
在第二个块中，＆＃34; sub_block_2＆＃34;将被隐藏。
在第三个块中，＆＃34; sub_block_3＆＃34;将被隐藏。

我试过这个jQuery，但它没有用。你能帮我解决这个问题吗？

<script>
jQuery(document).ready(function(){
jQuery('.block_title').each(function(){
var title = jQuery('.block_title').text();

if(title == 'item1'){
    jQuery('.sub_block_1').hide();
}
if(title == 'item2'){
    jQuery('.sub_block_2').hide();
}
if(title == 'item3'){
    jQuery('.sub_block_3').hide();
}
})
});
</script>

Answer 1

您需要将var title = jQuery('.block_title').text();修改为var title = jQuery(this).text(); 并指定要隐藏子div的上下文。

以下是可行的

＆＃13;

jQuery(document).ready(function() {
jQuery('.block_title').each(function () {
    var title = jQuery(this).text();
    var $parent = jQuery(this).parent();
    if (title == 'item1') {
        jQuery('.sub_block_1', $parent).hide();
    }
    if (title == 'item2') {
        jQuery('.sub_block_2', $parent).hide();
    }
    if (title == 'item3') {
        jQuery('.sub_block_3', $parent).hide();
    }
})
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="first">
    <div class="block_title">item1</div>
    <div id="first_block_1">
        <div class="sub_block_1">block content 1_1</div>
        <div class="sub_block_2">block content 2_1</div>
        <div class="sub_block_3">block content 3_1</div>
    </div>
</div>

<div id="second">
    <div class="block_title">item2</div>
    <div id="second_block_1">
        <div class="sub_block_1">block content 1_2</div>
        <div class="sub_block_2">block content 2_2</div>
        <div class="sub_block_3">block content 3_2</div>
    </div>
</div>

<div id="third">
    <div class="block_title">item3</div>
    <div id="third_block_1">
        <div class="third_block_1">block content 1_3</div>
        <div class="sub_block_2">block content 2_3</div>
        <div class="sub_block_3">block content 3_3</div>
    </div>
</div>

＆＃13;

Answer 2

您可以使用来自+

的相邻同级选择器:eq()，index和参数.each()

jQuery(".block_title").each(function(index, el) {
  jQuery("+ > :eq("+ index +")", this).hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first">
    <div class="block_title">item1</div>
    <div id="first_block_1">
        <div class="sub_block_1">block content 1_1</div>
        <div class="sub_block_2">block content 2_1</div>
        <div class="sub_block_3">block content 3_1</div>
    </div>
</div>

<div id="second">
    <div class="block_title">item2</div>
    <div id="second_block_1">
        <div class="sub_block_1">block content 1_2</div>
        <div class="sub_block_2">block content 2_2</div>
        <div class="sub_block_3">block content 3_2</div>
    </div>
</div>

<div id="third">
    <div class="block_title">item3</div>
    <div id="third_block_1">
        <div class="sub_block_1">block content 1_3</div>
        <div class="sub_block_2">block content 2_3</div>
        <div class="sub_block_3">block content 3_3</div>
    </div>
</div>

Answer 3

HTML：

<div id="first">
    <div class="block_title" data-count="1">item1</div>
    <div id="first_block_1">
        <div class="sub_block_1">block content 1_1</div>
        <div class="sub_block_2">block content 2_1</div>
        <div class="sub_block_3">block content 3_1</div>
    </div>
</div>

<div id="second">
    <div class="block_title"  data-count="2">item2</div>
    <div id="second_block_1">
        <div class="sub_block_1">block content 1_2</div>
        <div class="sub_block_2">block content 2_2</div>
        <div class="sub_block_3">block content 3_2</div>
    </div>
</div>

<div id="third">
    <div class="block_title"  data-count="3">item3</div>
    <div id="third_block_1">
        <div class="sub_block_1">block content 1_3</div>
        <div class="sub_block_2">block content 2_3</div>
        <div class="sub_block_3">block content 3_3</div>
    </div>
</div>

和javascript部分：

jQuery(document).ready(function(){
jQuery('.block_title').each(function(){
var countno = jQuery(this).attr("data-count");
var title = jQuery(this).text();
var parent = jQuery(this).parent();
if(title == 'item'+countno){
    jQuery('.sub_block_'+countno,parent).hide();
}
})
});

请参阅url

Answer 4

＆＃13;

jQuery(document).ready(function(){
jQuery('.block_title').each(function(){
//var title = jQuery('.block_title').text();
var title =jQuery(this).text();

if(title == 'item1'){
    jQuery('.sub_block_1').hide();

}
if(title == 'item2'){
    jQuery('.sub_block_2').hide();
}
if(title == 'item3'){
    jQuery('.sub_block_3').hide();
}
})
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="first">
    <div class="block_title">item1</div>
    <div id="first_block_1">
        <div class="sub_block_1">block content 1_1</div>
        <div class="sub_block_2">block content 2_1</div>
        <div class="sub_block_3">block content 3_1</div>
    </div>
</div>

<div id="second">
    <div class="block_title">item2</div>
    <div id="second_block_1">
        <div class="sub_block_1">block content 1_2</div>
        <div class="sub_block_2">block content 2_2</div>
        <div class="sub_block_3">block content 3_2</div>
    </div>
</div>

<div id="third">
    <div class="block_title">item3</div>
    <div id="third_block_1">
        <div class="sub_block_1">block content 1_3</div>
        <div class="sub_block_2">block content 2_3</div>
        <div class="sub_block_3">block content 3_3</div>
    </div>
</div>

＆＃13;

用jquery隐藏特定的子div

4 个答案: