Получить список значений в элементе div с помощью jquery

Question

Я добавляю элементы динамически с помощью ajax_select (приложение со встроенным JS-скриптом для добавления элементов), оно добавляет элементы как

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

Здесь я добавил White, Yellow and Black это внутри div id = id_colours_on_deck, как я могу получить список всех цветов в id_colours_on_deck. Я не дружу с jquery, вероятно, здесь я могу получить ответ.

Answer 1

Я внес небольшое изменение в ваш HTML, добавив имя цвета к span с классом .color-name, и сгенерировал следующий ответ:

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>

Надеюсь, это было полезно.

Answer 2

Поскольку он добавляется динамически, вам нужно использовать $ (document) или $ ('body'), чтобы найти ваши элементы, так как jQuery работает с DOM, который загружается при загрузке документа. Вот почему новые добавленные элементы не могут быть нацелены обычными способами:

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

затем, чтобы получить свои данные, вы бы использовали что-то вроде:

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

Answer 3

Другим решением будет использование этой техники

$("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();

Answer 4

Вы можете использовать каждую функцию, что-то вроде этого.

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

}

Это, однако, будет включать X из тега span.

Fiddle

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

Answer 5

Вы можете использовать обычный JavaScript, querySelectorAll и lastChild.

С querySelectorAll вы получаете выделение div с цветным текстом, а с lastChild вы избегаете получения span и можете захватить текстовый узел , содержащий цвет.

Фрагмент стека

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>

---

Обновлено на основе комментария, как быть совместимым со старыми браузерами.

Вот вариант, который сделает это очень далеко назад:)

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>

Answer 6

Вы можете перебирать div с помощью each() и захватывать только текст с помощью .contents()[1], например:

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

Answer 7

Если я правильно понял ваш вопрос, вы хотите «извлечь» цвета, которые вы упомянули в div? (Белый, желтый, черный)

Используя jQuery, вы должны иметь возможность сделать что-то подобное с jQuery: (однако, это также будет включать в себя «X», который находится внутри диапазона, так что его нужно будет посмотреть)

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