Maison  >  Questions et réponses  >  le corps du texte

javascript - filtrage et rendu des tableaux

var données = [{

    label: '分类一',
    value: '0'
}, {
    label: '分类二',
    value: '1'
}, {
    label: '分类三',
    value: '2'
}, {
    label: '分类四',
    value: '3'
}, {
    label: '分类五',
    value: '4'
}, {
    label: '分类六',
    value: '5'
}]

<p class="text">

<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>

</p>

Veuillez me dire comment restituer la valeur de l'étiquette correspondante dans dom en fonction de la valeur des données de la manière la plus simple ? ? Les données sont incertaines, il peut y en avoir plus de dix ou vingt

仅有的幸福仅有的幸福2696 Il y a quelques jours896

répondre à tous(4)je répondrai

  • PHP中文网

    PHP中文网2017-06-26 10:54:24

    La méthode ci-dessus peut être appliquée, mais cela équivaut à enregistrer une variable à chaque fois, à ajouter un nœud span à .text à chaque fois et à manipuler le DOM, ce qui entraîne beaucoup de surcharge ! Personnellement, je recommande d’utiliser la méthode suivante.

    var opText= document.querySelector('.text'),var _text="";
    data.forEach(function(item){
        //把每一次遍历的label加上节点,再储存在_text上。
        _text += '<span>'+item.label+'</span>';
    });
    //最后直接把_text赋值到opText.innerHTML上。
    opText.innerHTML=_text ;
    

    répondre
    0
  • PHP中文网

    PHP中文网2017-06-26 10:54:24

    var container = document.querySelector('.text')
    data.forEach(function(item){
        var span = document.createElement('span')
        span.innerHTML = item.label
        span.setAttribute('value', item.value)
        container.appendChild(span)
    })

    répondre
    0
  • 给我你的怀抱

    给我你的怀抱2017-06-26 10:54:24

    Les méthodes ci-dessus sont toutes réalisables, mais les deux premières méthodes ont leurs propres avantages et inconvénients en termes de performances sous Firefox et Chrome. Désormais, la pratique courante consiste à créer un nouveau fragment de document vierge (DocumentFragment).

    const $container = document.querySelector('.text');
    const fragment = document.createDocumentFragment();
    data.map(item => {
        let span = document.createElement("span");
        span.textContent = item;
        fragment.appendChild(span);
    });
    $container.appendChild(fragment);

    répondre
    0
  • typecho

    typecho2017-06-26 10:54:24

    var data = [{
        label: '分类一',
        value: '0'
    }, {
        label: '分类二',
        value: '1'
    }]
    
    // 根据value获取dataList中对应的项
    function getLabelByValue(dataList, value) {
      return dataList.find(function (item) {
        return item.value === value // 这里使用的强等,根据情况可选 ==
      })
    }
    
    // 省略DOM操作
    let label = getLabelByValue(data, '0') // 分类一

    répondre
    0
  • Annulerrépondre