javascript - Get list of values in div element with jquery - Stack Overflow

admin管理员组

文章数量:1220064

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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 4, 2018 at 9:05 Pankaj Sharma asked Jul 4, 2018 at 8:58 Pankaj SharmaPankaj Sharma 2,26733 gold badges2727 silver badges5656 bronze badges 3

• You are mention only White Color in kill_1id_colours – Kiran Joshi Commented Jul 4, 2018 at 9:01
• ohh, its my mistake sorry, I have edited the question – Pankaj Sharma Commented Jul 4, 2018 at 9:02
• @PankajSharma FYI, I updated my answer with a much better, and more performant solution. – Asons Commented Jul 4, 2018 at 10:29

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 6

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();
})

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();
});

Because it's dynamically added you need to use $(document) or $('body') to find your elements as jQuery works with the DOM that's loaded on document load. Which is why newly added elements can't be targeted using conventional ways:

$(document).find('#my-dynamic-element'); //this is how you get the dynamically added element

then to get your data you'd use something like:

$(document).find('#id_colours_on_deck_7').text();

You can use an each function, something like this.

$('#id_colours_on_deck div').each(function) {
    $('#id_colours_on_deck div').html();

}

This however will include the X from the span tag.

Fiddle

https://jsfiddle.net/shawnw/4yaem85k/12/

Another solution would be to use this technique

$("div[id^=id_colours_on_deck_]").clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

You can use plain javascript, querySelectorAll and lastChild.

With querySelectorAll you get the selection of div with a color text, and with lastChild you avoid getting the span and can grab the text node holding the color.

Stack snippet

Array.from(document.querySelectorAll('#id_colours_on_deck div')).forEach(el => {
  console.log( el.lastChild.textContent );
})

<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>

---

Updated based on a comment how to be compatible with older browsers.

Here is an option that will do that, far way back in time :)

var list = document.getElementById('id_colours_on_deck').children;
for (var i = 0; i < list.length; i++) {
  var el = list[i].lastChild;
  console.log( (el.textContent || el.innerText) );
}

<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>

I have made a very small change to your HTML by adding the color name to a span with class .color-name, and have generated the following answer:

var colorParentList = $("#id_colours_on_deck span.color-name");
colorParentList.each(function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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> <span class="color-name">White</span>
  </div>

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

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

I hope this was helpful.

本文标签： javascriptGet list of values in div element with jqueryStack Overflow