Dynamically manipulating the DOM with jQuery

Question

Dynamically manipulating the DOM with jQuery

Navigation

#1 by (5 votes)

5

The system I'm currently working on requires a lot of AJAX and DOM manipulation, so I started learning (not long ago), jQuery.

In the feature I'm currently developing, there's a jQuery plugin called multi-select , which aims to select a few destinations and then saves them.

The flow is as follows:

The user selects the options within my "multi-select";

Then press the "Filter" button;

Soon, some components are added to the DOM within a div with id="divId" .

Below is an image that might help illustrate the problem:

SofarwhatI'veactuallybeenabletodoisaddthecomponentsviajQuery,asshownbelow:

$('#show-destination').click(function(){$('#divId').prepend('<h5id="destination-title">Nova York <a href="#" class="btn btn-danger pull-right btn-fechar"><span class="entypo-cancel-squared"></span></a></h5>');

   $('#destination-title').after('<div id="div-departure" class="box03"></div>');
   $('#div-departure').append('<div id="div-input-departure" class="input-group "></div');
   $('#div-input-departure').append('<span id="span-departure" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
   $('#span-departure').after('<input id="input-departure" type="text" class="form-control" id="data4" placeholder="Data de Ida">');

   $('#div-departure').after('<div id="div-arrive" class="box03"></div>');
   $('#div-arrive').append('<div id="div-input-arrive" class="input-group "></div');
   $('#div-input-arrive').append('<span id="span-arrive" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
   $('#span-arrive').after('<input id="input-arrive" type="text" class="form-control" id="data4" placeholder="Data de Volta">');

});

The problem in reality is to add such components via jQuery dynamically. I mean, when the user selects the destinations in the plugin and clicks "Filter" it should popular the "Div" on the side with the name of the destinations and make an AJAX call to later popularize a list.

EDITION

When I select some record in my multi-select component the rendered html is:

<div class="ms-selection">
   <ul class="ms-list" tabindex="-1">
      <li class="ms-elem-selection" id="49-selection" style="display: none;"><span>Roma</span></li>
      <li class="ms-elem-selection ms-selected" id="50-selection" style=""><span>Paris</span></li>
   </ul>
</div>

How can we fix the ms-selected in the paris destination that was selected.

The issue is that I want to get all of these selected records and add elements in the DOM (Including these names).

More or less like this:

   // pesquisa de todos os elementos ‘div’ na página 
   $('div.ms-selection > ul').each(function (i) {
       //Obtenho todos os registros e trabaho com eles
   });

javascript html jquery

asked by anonymous 28.10.2014 / 13:51

1 answer

How to change the name of the compiled application? How do I always get the latest video from a YouTube channel?

score 5 · Accepted Answer

Within <ul> , <li> is differentiated by the ms-selected class, and the function hasClass() . will determine this. Here, I am looping with:

$('.ms-selection ul.ms-list li').each(function() {});

And checking if li has the "selected" class, then #divId is popular.

$('#show-destination').click(function() {
  $('.ms-selection ul.ms-list li').each(function() {
    if ($(this).hasClass('ms-selected')) {
      $('#divId').prepend('<h5>' + $(this).text() + '</h5>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="ms-selection">
  <ul class="ms-list" tabindex="-1">
    <li class="ms-elem-selection" id="49-selection" style="display: none;"><span>Roma</span>
    </li>
    <li class="ms-elem-selection ms-selected" id="50-selection" style=""><span>Paris</span>
    </li>
    <li class="ms-elem-selection ms-selected" id="51-selection" style=""><span>Madrid</span>
    </li>
  </ul>
</div>
<br />
<div id="divId">Items selecionados</div>
<br />
<button id="show-destination">show</button>