How to make an each inside an append?

Question

How to make an each inside an append?

Navigation

#1 by (1 votes)

1

I am trying to create a Jquery plugin but I can not adapt a .each inside a .append, how can I use it to work inside .append?

Here is my example below:

var selectBox = $('.select__atual');
var selectOption = $('.select__opcoes__label');

selectBox.click(function(){
  $(this).toggleClass('open');
  $('.select__opcoes').toggle();
});

selectOption.click(function(){
  var selectName = $(this).text();
  $('.select__atual__text').text(selectName);
});


jQuery.fn.customSelect = function(options){
  
        var settings = $.extend({
            border       : '1px solid red',
            list         : ['Option 1', 'Option 2'],
            defaultText  : 'Choose an option'
        }, options);
  
   return this.each(function(){
     console.log(settings.list);
       $(this)
         .append('<div class="wrapper-select">
                  <div class="select__atual">
                  <span class="select__atual__text">${settings.defaultText}</span>
                  </div>
                  <div class="select__opcoes">${settings.list}</div>
                  </div>')
         .css('border', settings.border);
    });
}
 
$('#mySelect').customSelect({
  border: '1px solid #cecece',
  defaultText: 'Escolha uma opção',
});

*{
  box-sizing:border-box;
}
main{
  width:600px;
  display:flex;
  margin:0 auto;
}
.wrapper-select{
  position:relative;
  width:100%;
}
.wrapper-select input{
  display:none;
}
.select__atual{
  height:50px;
  width:100%;
  cursor:pointer;
  border:1px solid;
  border-color: #cecece;
  display:flex;
  align-items:center;
  padding:0 15px;
}
.select__atual.open{
  border-bottom:none;
}
.select__opcoes{
  width:100%;
  display:none;
  border:1px solid;
  border-top:none;
  border-color:#cecece;
}
.select__opcoes__label{
  display:flex;
  height:50px;
  width:100%;
  align-items:center;
  padding:0 15px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><main><divid="mySelect"></div>
  </main>

javascript jquery plugin

asked by anonymous 26.02.2018 / 15:37

1 answer

Center button vertically inside nav boostrap Collapse and no dropdown works?

score 1 · Accepted Answer

Well, first we have to fix some errors. The variables declared at the beginning have no effect, so I took the liberty of removing them. The events click moved into the plugin.

Within the Template Literals we make the map of the array:

${settings.list.map(item => '<div class="select__opcoes">${item}</div>').join('')}

Some changes made to CSS were just to improve the experience in SO .

Final result

jQuery.fn.customSelect = function(options){
    $(this).on('click', function() {
        $(this).toggleClass('open');
        $('.select__opcoes').toggle();
    });

    $(this).on('click', '.select__opcoes', function() {
        var selectName = $(this).text();
        $('.select__atual__text').text(selectName);
    });

    var settings = $.extend({
        border       : '1px solid red',
        list         : ["Option 1","Option 2"],
        defaultText  : 'Choose an option'
    }, options);

    $(this)
        .append('<div class="wrapper-select">
            <div class="select__atual">
                <span class="select__atual__text">${settings.defaultText}</span>
            </div>
            ${settings.list.map(item => '<div class="select__opcoes">${item}</div>').join('')}
        </div>')
        .css('border', settings.border);
}

$('#mySelect').customSelect({
    border: '1px solid #cecece',
    defaultText: 'Escolha uma opção',
});

*{
  box-sizing:border-box;
}
#mySelect {
  width: 100%;
}
main{
  width: 90%;
  display:flex;
  margin:0 auto;
}
.wrapper-select{
  position:relative;
  width:100%;
}
.wrapper-select input{
  display:none;
}
.select__atual{
  height:50px;
  width:100%;
  cursor:pointer;
  border:1px solid;
  border-color: #cecece;
  display:flex;
  align-items:center;
  padding:0 15px;
}
.select__atual.open{
  border-bottom:none;
}
.select__opcoes {
cursor: pointer;
  width:100%;
  display:none;
  border:1px solid;
  border-top:none;
  border-color:#cecece;
  padding: 14px;
}
.select__opcoes:hover {
  background: #e8e8e8;
}
.select__opcoes__label{
  display:flex;
  height:50px;
  width:100%;
  align-items:center;
  padding:0 15px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><main><divid="mySelect"></div>
</main>

Reference

Map