Javascript 获取数据-来自未指定数量的子div的值，但仅在选择之后

我问了一个关于根据复选框标记筛选多个项目的问题（请参见此处：）。答案很有效，并且做了它需要做的事情

关于这个问题，我现在想知道如何获取应用过滤器时显示的各种项目的数据apt name值。如果您查看下面的JSFIDLE，您将看到可以通过选中复选框进行过滤。通过选中不同类别中的更多框，可以在结果中进行筛选

基本上，我只需要从过滤器返回的结果中获取属性。使用这些属性，我打算在以后的体育场中切换其他分区，以便高亮显示/指示哪些公寓符合所选标准

我想这是一个陷阱；“apt results”div中的项目数量不是固定的，因为该列表最终将从数据库中填充。我唯一能确定的是一个home的每个entry div的不同类名。因此，我最终可能会有20或50个家庭，因此在过滤后会有X个数量的结果

这是代码，下面是（节略）代码：

正文{宽度：100%；}
#包装{宽度：640px；溢出：自动；}
ul li{列表样式类型：无；}
#aptresults{width:300px；float:left；}
#选择{宽度：330px；浮点：左；}
家园
奥珀夫拉克特


50平方米-100平方米


100平方米-150平方米


150平方米-200平方米


200平方米+


类型


阁楼


别墅


展开图


城市的


祖伊德


普里斯


1.000.000 - 2.000.000


2.000.000 - 3.000.000


3.000.000 - 4.000.000


4.000.000 - 5.000.000


巴尔肯


50平方米-100平方米


100平方米-150平方米


150平方米-200平方米


200平方米+


50m2-市区-1mil-50m2巴尔肯
50平方米-阁楼-1英里-50平方米巴尔肯
50m2-Zuid-3mil-150m2巴尔肯
50平方米-阁楼-2英里-50平方米巴尔肯
50m2-市区-1mil-50m2巴尔肯
50平方米-阁楼-2英里-50平方米巴尔肯
100m2-Zuid-2mil-100m2 balkon
100平方米-市区-2英里-100平方米巴尔肯
100平方米-市区-2英里-100平方米巴尔肯
100平方米-市区-2英里-100平方米巴尔肯
100平方米-市区-2英里-100平方米巴尔肯
100m2-Zuid-2mil-100m2 balkon
150m2-别墅-3mil-150m2巴尔肯
150平方米-别墅-3平方米-100平方米巴尔肯
150m2-别墅-3mil-150m2巴尔肯
150m2-别墅-2mil-150m2巴尔肯
200平方米-全景-4英里-200平方米巴尔肯
200m2-Zuid-4mil-200m2巴尔肯
200平方米-全景-4英里-200平方米巴尔肯
200m2-Zuid-4mil-200m2巴尔肯
$（文档）.ready（函数（）{
//$（'aptresults div'）.show（）；
$（'input[type=“checkbox”]”）。单击（函数（）{
选择（）
})
});
函数选择（）
{
$（'aptresults div'）.hide（）；
变量$div=$（'aptresults div'）；
var过滤器=[]；
var aptName=[]；
var检查=假；
$（'ul'）。每个（函数（）
{
过滤器=[]；
aptName=[]；
检查=错误；
$（this）.find（'input[type=“checkbox”]：checked'）。每个（函数（）
{
var css=$（this.val（）；
filter.push（'.'+css）；
检查=正确；
如果（检查==true）{
$（“#aptresults”）.children（“div”）.each（function（）{
aptName.push（$（this.data（“apt名称”））；
});
aptName.push（“+aptName.join（“，”）；
}
});
如果（检查）
{
$div=$div.filter（filter.join（'，'）；
}
console.log（aptName）；
})
$div.show（）；
}

这就是你要找的吗<代码>apt名称值显示在控制台中

在显示div之前，我循环遍历结果，并将值放入名为

results

的数组中

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
选择（）
})
});
函数选择（）
{
$（'aptresults div'）.hide（）；
变量$div=$（'aptresults div'）；
var过滤器=[]；
var aptName=[]；
var检查=假；
$（'ul'）。每个（函数（）
{
过滤器=[]；
aptName=[]；
检查=错误；
$（this）.find（'input[type=“checkbox”]：checked'）。每个（函数（）
{
变量c
<style>
body {width: 100%;}
#wrapper {width: 640px;overflow: auto;}
ul li {list-style-type: none;}
#aptresults {width: 300px;float: left;}
#selections {width: 330px;float: left;}
</style>

<div id="wrapper">
    <div id="content">

        <div id="heading">
            <h1 class="inline">Homes</h1>
        </div>

        <div id="selections">
            <b>Oppervlakte</b>
            <ul class="apt-opper">
                <li >
                    <input type="checkbox" value="o50" id="o50" />
                    <label for="o50">50m2 - 100m2</label>
                </li>
                <li >
                    <input type="checkbox" value="o100" id="o100" />
                    <label for="o100">100m2 - 150m2</label>
                </li>
                <li >
                    <input type="checkbox" value="o150" id="o150" />
                    <label for="o150">150m2 - 200m2</label>
                </li>
                <li >
                    <input type="checkbox" value="o200" id="o200" />
                    <label for="o200">200m2 +</label>
                </li>
            </ul>

            <b>Type</b>
            <ul class="apt-type">
                <li >
                    <input type="checkbox" value="tPe" id="tPe" />
                    <label for="tPe">Penthouse</label>
                </li>
                <li >
                    <input type="checkbox" value="tV" id="tV" />
                    <label for="tV">Villa</label>
                </li>
                <li >
                    <input type="checkbox" value="tPa" id="tPa" />
                    <label for="tPa">Panorama</label>
                </li>
                <li >
                    <input type="checkbox" value="tU" id="tU" />
                    <label for="tU">Urban</label>
                </li>
                <li >
                    <input type="checkbox" value="tZ" id="tZ" />
                    <label for="tZ">Zuid</label>
                </li>
            </ul>

            <b>Prijs</b>
            <ul class="apt-price">
                <li >
                    <input type="checkbox" value="p1" id="p1" />
                    <label for="p1">1.000.000 - 2.000.000</label>
                </li>
                <li >
                    <input type="checkbox" value="p2" id="p2" />
                    <label for="p2">2.000.000 - 3.000.000</label>
                </li>
                <li >
                    <input type="checkbox" value="p3" id="p3" />
                    <label for="p3">3.000.000 - 4.000.000</label>
                </li>
                <li >
                    <input type="checkbox" value="p4" id="p4" />
                    <label for="p4">4.000.000 - 5.000.000</label>
                </li>
            </ul>

            <b>Balkon</b>
            <ul class="apt-balkon">
                <li >
                    <input type="checkbox" value="b50" id="b50" />
                    <label for="b50">50m2 - 100m2</label>
                </li>
                <li >
                    <input type="checkbox" value="b100" id="b100" />
                    <label for="b100">100m2 - 150m2</label>
                </li>
                <li >
                    <input type="checkbox" value="b150" id="b150" />
                    <label for="b150">150m2 - 200m2</label>
                </li>
                <li >
                    <input type="checkbox" value="b200" id="b200" />
                    <label for="b200">200m2 +</label>
                </li>
            </ul>
        </div>

<!-- Random test list of items, will be populated from a database -->
        <div id="aptresults">
            <div class="apt o50 tU p1 b50" data-apt-name="apt_1_9">50m2 - Urban - 1mil - 50m2 balkon</div>
            <div class="apt o50 tPe p1 b50" data-apt-name="apt_1_10_">50m2 - Penthouse - 1mil - 50m2 balkon</div>
            <div class="apt o50 tZ p3 b150" data-apt-name="apt_2_1">50m2 - Zuid - 3mil - 150m2 balkon</div>
            <div class="apt o50 tPe p2 b50" data-apt-name="apt_3_2">50m2 - Penthouse - 2mil - 50m2 balkon</div>
            <div class="apt o50 tU p1 b50" data-apt-name="apt_4_1">50m2 - Urban - 1mil - 50m2 balkon</div>
            <div class="apt o50 tPe p2 b50" data-apt-name="apt_4_3">50m2 - Penthouse - 2mil - 50m2 balkon</div>
            <div class="apt o100 tZ p2 b100" data-apt-name="apt_5_2">100m2 - Zuid - 2mil - 100m2 balkon</div>
            <div class="apt o100 tU p2 b100" data-apt-name="apt_6_23">100m2 - Urban - 2mil - 100m2 balkon</div>
            <div class="apt o100 tU p2 b100" data-apt-name="apt_7_15">100m2 - Urban - 2mil - 100m2 balkon</div>
            <div class="apt o100 tU p2 b100" data-apt-name="apt_7_28">100m2 - Urban - 2mil - 100m2 balkon</div>
            <div class="apt o100 tU p2 b100" data-apt-name="apt_8_67">100m2 - Urban - 2mil - 100m2 balkon</div>
            <div class="apt o100 tZ p2 b100" data-apt-name="apt_8_78">100m2 - Zuid - 2mil - 100m2 balkon</div>
            <div class="apt o150 tV p3 b150" data-apt-name="apt_9_17">150m2 - Villa - 3mil - 150m2 balkon</div>
            <div class="apt o150 tV p3 b100" data-apt-name="apt_9_35">150m2 - Villa - 3mil - 100m2 balkon</div>
            <div class="apt o150 tV p3 b150" data-apt-name="apt_10_42">150m2 - Villa - 3mil - 150m2 balkon</div>
            <div class="apt o150 tV p2 b150" data-apt-name="apt_11_01">150m2 - Villa - 2mil - 150m2 balkon</div>
            <div class="apt o200 tPa p4 b200" data-apt-name="apt_12_02">200m2 - Panorama - 4mil - 200m2 balkon</div>
            <div class="apt o200 tZ p4 b200" data-apt-name="apt_12_04">200m2 - Zuid - 4mil - 200m2 balkon</div>
            <div class="apt o200 tPa p4 b200" data-apt-name="apt_13_36">200m2 - Panorama - 4mil - 200m2 balkon</div>
            <div class="apt o200 tZ p4 b200" data-apt-name="apt_14_28">200m2 - Zuid - 4mil - 200m2 balkon</div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//  $('#aptresults div').show();
    $('input[type="checkbox"]').click(function(){
        select()
    })
});

function select()
{
    $('#aptresults div').hide();
    var $div=$('#aptresults div');
    var filter = [];
    var aptName = [];
    var check=false;

    $('ul').each(function()
    {
        filter = [];
        aptName = [];
        check = false;
        $(this).find('input[type="checkbox"]:checked').each(function()
        {
            var css=$(this).val();          
            filter.push('.'+css);
            check = true;

            if(check == true) {
                $("#aptresults").children("div").each(function() {
                    aptName.push($(this).data("apt-name"));
                });
                aptName.push(""+aptName.join(","));
            }
        });

        if (check)
            {
                $div = $div.filter(filter.join(','));
            }
            console.log(aptName);
    })
    $div.show();
}
</script>

    $(this).find('input[type="checkbox"]:checked').each(function()
    {
        ...........
    }

function select(){
    $('aptresults > div:visible').each(function(){
        console.log($(this).attr('data-apt-name'));
        var aptName = [];
        aptName[] = $(this).attr('data-apt-name');
    });
    console.log(aptName);
}