Get list of values in div element with jquery

Question

I am adding items dynamically with ajax_select (app with builtin js script to add items), it is adding items as

<div class="col-md-4 col-sm-6">
<div class="form-group ">
    <label class="control-label" for="id_colours">Colours</label>
    <input type="text" name="colours_text" id="id_colours_text" value="" autocomplete="off" class="form-control ui-autocomplete-input">
    <input type="hidden" name="colours" id="id_colours" value="|1|7|2|" data-ajax-select="autocompleteselectmultiple" data-plugin-options="{&quot;html&quot;: true, &quot;source&quot;:
&quot;/ajax_select/ajax_lookup/colours&quot;}" data-changed="true">

     <div id="id_colours_on_deck" class="results_on_deck">
        <div id="id_colours_on_deck_1">
            <span class="ui-icon ui-icon-trash" id="kill_1id_colours">X</span> White
        </div>

        <div id="id_colours_on_deck_7">
            <span class="ui-icon ui-icon-trash" id="kill_7id_colours">X</span> Yellow
        </div>

        <div id="id_colours_on_deck_2">
            <span class="ui-icon ui-icon-trash" id="kill_2id_colours">X</span> Black
        </div>
    </div>
</div>

Here I added White, Yellow and Black these are inside div of id = id_colours_on_deck, how can I get the list of all colours in id_colours_on_deck. I am not friendly with jquery probably here I can get the answer.

Answer 1

You can iterate over the divs using each() and grab only the text using .contents()[1], like this:

("div[id^='id_colours_on_deck_']").each(function(){
    $($(this).contents()[1]).text();
})

Answer 2

If I have understood your question correctly, you want to "extract" the colors you have mentioned inside the divs? (So White, Yellow, Black)

Using jQuery, you should be able to do something like this with jQuery: (however, this will also include the "X" that is inside the span, so that will need to be looked at)

$("#id_colours_on_deck").find("div[id^=id_colours_on_deck]").each(function() {
    var value = $(this).text();
});