jQuery - 基于父 div 类删除 div

Question

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

<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()。