Как найти текст и / или теги после элемента?(Jquery, JS)

Question

Я использую Jquery 3.4.1.

У меня есть HTML-форма, которая содержит такие элементы, как этот.Это помещается

<section id=question1>
<input name=A type=radio value=1>Some text (Some text)
<input name=A type=radio value=2><i>Some text</i>
<u class=somewrapper><input name=A type=radio value=3><i>Some text<i> (Some text)</u>
<u class=somewrapper><input name=A type=radio value=4><i><em>Some text</em><i> (Some text)</u>
<u class=somewrapper><input name=A type=radio value=5><u><em>Some text</em><u> (Some text)</u>
</section>

Я хотел бы получить значение текста после ввода текста, который я выбрал.

$("input[type='radio']").on("click", function(){
    var allInputs = $(this).parent().find("input");
    var Chk = $(allInputs).filter("input:checked");
    console.log($(Chk).find(text=true));
    });

Мне нужно получить вещи (будь то теги или пустой текст), которые находятся между выбранным вводом и следующим вводом или концом этого раздела.

Когда первый ввод выбрал результатможет быть array[0] = "Some text (Some text)" Когда выбран второй вход, результатом может быть array[0] = object with i tag containing the text.Когда третий вход выбран, результат может быть как array[0] = object with i tag containing text "Some text" и array[1] = object with a text "(Some text)" (или что-то вроде этого)

Я также попытался получить следующие элементы:

console.log( $(Chk).NextAll() );

Но я получилошибка в Chrome (49.0.2623.112 м), NextAll не является функцией.

Примечание: Цель, по которой я хочу искать текст после ввода, состоит в том, что я хочу изменить текст, когда пользователь мобильногоустройство щелкнуло по радиобоксу.Я хочу скрыть текст или сделать его короче, когда выбрана эта опция, и отображаемый текст занимает меньше места на маленьком экране.Это не предмет обсуждения, я просто хочу объяснить, почему я пытаюсь найти тексты, за которыми следует тег ввода.

Answer 1

Как насчет пометки текста, связанного с элементом ввода, похожим классом?

Сложно использовать селекторы CSS здесь из-за того, насколько непоследователен макет.

Затем используйте:

$("input[type='radio']").on("click", function(){
   let val = this.value;
   let allText = $(`.label-${val}`);
   let trimmedText = [];
   for(let text of allText) {
    trimmedText.push($(text).html().trim());
   }
   let concatText = trimmedText.join(' ');
   console.log(concatText)
});

См .: https://jsfiddle.net/uf0ejcso/

Answer 2

В идеале у вас должна быть согласованная структура HTML, и это будет проще.Тем не менее, вы можете попробовать что-то вроде этого:

$("input[type='radio']").on("click", function() {
    var outputText = [];
    var current = this.nextSibling;
    while (current !== null && current.tagName !== "INPUT") {
        if (current.tagName) { //Check if element or node
            outputText.push(current.innerText)
        } else {
            outputText.push(current.nodeValue)
        }
        current = current.nextSibling;
    }
});

Одно ограничение заключается в том, что для такого элемента, как <u class=somewrapper><input name=A type=radio value=3><i>Some text</i> (Some text)</u>, будет добавлено «Некоторый текст» и «(Некоторый текст)» при сканировании элемента.как сканирование узла (вызывает дублирование).Вы можете дополнительно оптимизировать это, проверив, содержит ли текущий элемент дочерние элементы, и обработав вместо этого дочерние элементы.

Answer 3

Попробуйте это:

 $(document).ready(function(){
      $('input[name=A]').click(function(){
        console.log($(this).nextAll().html())
      });
    });