Question

我正在尝试获得具有特定div类的所有id个元素的div CSS个。我可以[object HTMLDivElement]获得using getElementByClass，但我无法从此对象获得id。基本上，完全我想做的是

获取具有特定div类的所有id元素的div CSS，
获取所有data-title元素的div，
使用字符串

data-title

div

制作所有不匹配的display:none元素的div。

以下是我的尝试：

function FilterFiles(filterItem) {
    var elements = document.getElementsByClassName("listItem");

    for (var i = 0; i < elements.length; i++) {

        alert(elements[i].id); 
        //  get div id of divs with data-title !=(not equal) filterItem
        // make display:none of matching divs
    }
}

以下是实际HTML http://jsfiddle.net/6bo1rjrt/1/的小提琴。

Answer 1

您可以使用attribute-not-equal-selector。你还需要为div元素提供id：

function FilterFiles(filterItem) {
  var ids= $('.listItem[data-title!="'+filterItem+'"]').map(function(){
       return this.id;
   }).get()
}

<强> Working Demo

用于隐藏不具有数据标题值的元素：

$('.listItem[data-title!="'+filterItem+'"]').hide()

Answer 2

var  temp = new Array(); 
var  title = new Array();   

function FilterFiles(filterItem) {

           $('.listItem').each(function () 
            {
                temp.push($(this).attr("id")); //get id of each div to array
                alert($(this).attr("id"));

                title.push($(this).attr("data-title")); //get title of each div to array

                 if($(this).attr("data-title") != filterItem) //check non matching div
                 {
                    $(this).hide(); //hide div
                 }

            });


    }

首先，我将所有div与每个特定的类循环，然后检查它＆＃34;数据标题＆＃34;。

Answer 3

使用Jquery，您可以执行以下操作：

var arr = [];
$('.listItem').each(function(){
    arr.push($(this).attr('id'));
});

Answer 4

使用jQuery .each()：

var arr = [];
$('.listItem').each(function(){
  arr.push(this.id);
});

使用jQuery .map()

var arr = $('.listItem').map(function() { return this.id; }).get();

Answer 5

我修改了你的小提琴例子。请参阅此更新fiddle

$("#filter").click(function () {
    var filterItem = "A03-5(KAB製ﾋｰﾀｰ付ｴｱｻｽｵﾍﾟｼｰﾄ)_20140515154904.xlsx";
    FilterFiles(filterItem);
});

function FilterFiles(filterItem) {
    var elements = $("div.listItem");
    elements.each(function(){
        var el=$(this);
        if(el.data("title")!=filterItem)
            el.hide();
        else
            el.show();
    });


    /*for (var i = 0; i < elements.length; i++) {

        alert(elements[i].id);
        //  get div id of divs with data-title !=(not equal) filterItem
        // make display:none of matching divs
    }*/
}

获取具有特定类的所有div的div id

5 个答案: