jQuery - 根据父 div 类删除 div

Question

我正在尝试创建一个 jQuery 脚本，该脚本将根据父 div 的类删除一个 div/s，例如基于下面的父 div 类，即 one-column I想要删除 div sideColumn-two 和 sideColumn-三

<div id="footer" class="one-column">
    <div class="wrapper">
        <div class="contentColumn">
            Main Content Column
        </div>
    </div>

    <div class="sideColumn-one">
        Side Column 1
    </div>

    <div class="sideColumn-two">
        Side Column 2
    </div>

    <div class="sideColumn-three">
        Side Column 2
    </div>       
</div>

如果父级的 div 类是two-column，那么它将删除 div sideColumn-one 和 sideColumn- Three，依此类推.

其他信息 - 父 div 的调用方式如下:

one-column
one-column-three
one-column-two-one
two-columns-left-sidebar
two-columns-right-sidebar
two-columns-equal
two-columns-equal-right
two-columns-50
two-columns-stacked-left
two-columns-stacked-right
two-columns-mixed
two-columns-mixed-left
two-columns-mixed-content-left
three-columns-mid
three-columns-equal
three-columns-sidebars-right
three-columns-sidebars-left
four-columns-equal
four-columns-mag

div contentColumn 永远不会被删除

任何帮助将不胜感激。

Answer 1

编辑:更新标记

var num = $("#footer").attr("class").replace("-column","");
$("#footer > div:gt(0):not(.sideColumn-" + num + ")").hide();​

You can try it here

<小时/>

之前的答案:在不更改标记的情况下，您可以这样:

var nums = { one: 1, two: 2, three: 3 };
var num = $("#test").attr("class")​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.replace("-column","");
$("#test > div:not(.col" + nums[num] + ")").hide();​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

You can give it a try here ，但是如果您通过为父级提供相同的类来简化它，例如:

<div id="test" class="col1">
    <div class="col1">
        Col 1
    </div>
    <div class="col2">
        Col 2
    </div>    
    <div class="col3">
        Col 3
    </div> 
</div>​

脚本变得更简单，如下所示:

$("#test > div:not(." + $("#test").attr("class") + ")").hide();​

You can try that version here ，如果你想删除而不是隐藏它们，只需替换 .hide()与 .remove() .