Question

在each()我希望：

隐藏data-infos.grpid = $jQuery(this).data('infos').grpid
显示下一个div data-infos.ordre = $jQuery(this).data('infos').next_ordre

我不知道如何使用data属性创建“where”并在其上执行“隐藏”或“显示”。

jQuery("div[testid]:visible").each(function() { 
    //Hide all div with same data-infos grpid
    //display the next one with 'next_ordre' (ordre=2 in this example)
});

<div testid="afcnG0tN" data-infos='{"banid":"3cxWET0T", "grpid":"12c0RNPo", "ordre":"1", "next_ordre":"2"}'>Test 1</div>
<div testid="afcnG0tN" data-infos='{"banid":"0i9fIbei", "grpid":"12c0RNPo", "ordre":"2", "next_ordre":"3"}' style="display: none">Test 2</div>
<div testid="afcnG0tN" data-infos='{"banid":"pTgfUFLf", "grpid":"12c0RNPo", "ordre":"3", "next_ordre":"1"}' style="display: none">Test 3</div>

Answer 1

这是我隐藏的代码

$(document).ready(function(){
    $("div[testid]:visible").each(function() {  
        if($(this).attr('testid') ===  $(this).data('infos').grpid){
            $(this).hide();
        }        
    }); 
});

如果有帮助，请告诉我，在这里您可以检查属性===数据值，您可以对其他检查执行相同操作。谢谢

Answer 2

jQuery("div[testid]:visible").each(function() { 
    var $that = $(this),
        data = $that.data('infos'),
        hideDivs = getTargetDiv('grpid', data.grpid),
        showDivs = getTargetDiv('ordre', data.next_ordre);

    hideDivs.forEach(function($div) {
        $div.hide();
    });

    showDivs.forEach(function($div) {
        $div.show();
    });
});

// Select some divs that pass the given check
function getTargetDiv (key, value) {
    var results = [];
    $('[data-infos]').each(function () {
        var $that = $(this),
            data = $that.data('infos');

        if(data[key] == value) results.push($that);
    });

    return results;
}

使用JSFiddle：https://jsfiddle.net/LeoAref/fxzhfvoz/

另一种方式：

jQuery("div[testid]:visible").each(function() { 
    var $that = $(this),
        data = $that.data('infos');

    doActionOnTargetDiv('grpid', data.grpid, 'hide');
    doActionOnTargetDiv('ordre', data.next_ordre, 'show')
});

function doActionOnTargetDiv (key, value, action) {
    $('[data-infos]').each(function () {
        var $that = $(this),
            data = $that.data('infos');

        if(data[key] == value) {
            if(action === 'hide') {
                $that.hide()
            } else if(action === 'show') {
                $that.show();
            }
        }
    });
}

Answer 3

想象一下，您首先要定义一个包含要满足的初始信息的数据结构：

var dataInfos = {
        grpid = "12345",
        ordre = "2"
    },
    nextOrdre;

然后你会迭代找到要隐藏的那个，然后迭代以显示对应于next_ordre的另一个：

$("div[testid]:visible").each(function() {
    var $this = $(this),
        infos = $this.data("infos");
    if (infos.grpid === dataInfos.grpid) {
        $this.hide();
        nextOrdre = infos.next_ordre;
    }
}

if (nextOrdre) {
    $("div[testid]").each(function() {
        var $this = $(this),
            infos = $this.data("infos");
        if (infos.ordre === nextOrdre) {
            $this.show();
        }
    }
}

使用JSON选择div by data属性

3 个答案: