循环遍历list元素,并将文本添加到jquery中的输入值中

Loop through list element and add text to the input value in jquery

本文关键字:jquery 输入 添加 文本 list 遍历 元素 循环      更新时间:2023-09-26

Basicaly我想循环通过并从第一个ul中获取的文本,然后将其附加到第二个ul 上的输入值

<ul class="first">
    <li>
        <p>test one </p>
    </li>
</ul>
<ul class="second">
    <li>
        <input type="radio" name="wis_con_q10_q3" value="Yes">
        <input type="radio" name="wis_con_q10_q3" value="No" checked="">
    </li>
</ul>
<ul class="first">
    <li>
        <p>text two </p>
    </li>
</ul>
<ul class="second">
    <li>
        <input type="radio" name="wis_con_q10_q4" value="Yes">
        <input type="radio" name="wis_con_q10_q4" value="No" checked="">
    </li>
</ul>

我试过用这种方式,但它不能正常工作

$("ul.first li p").each(function () {
    $("ul.second li input").val($("ul.second li input").val() + "_" + $(this).text());
});

这就是我正在努力实现的

<input type="radio" name="wis_con_q10_q4" value="Yes_text two ">
<input type="radio" name="wis_con_q10_q4" value="No_text two " checked="">

您可以像这样使用

$(".first").each(function () {
    var radio = $(this).next().find("input[type='radio']");
    var value=$(this).find("p").text();
    radio.each(function(){
        $(this).val($(this).val() + "_"+ value   );
    });
});

Fiddle

$("ul.first li p").each(function (index,val) {
    $("ul.second li input").eq(index).val($("ul.second li input").val() + "_" + $(this).text());
});

每个Jquery发送索引和值作为参数,您可以将其与.eq(nb(一起使用以获得nb元素。

由于您可以在jquery的.val(fn)方法中传递一个函数来返回值,我们可以使用它来获得所需的输出。无论何时在其中使用函数,都必须返回带有return关键字的值。

使用此:

$("input[type='radio']").val(function(){
    return this.value + '_' + $(this).closest('ul').prev('ul').find('p').text().trim();
});

$("input[type='radio']").val(function() {
      return this.value + '_' +
      $(this).closest('ul').prev('ul').find('p').text().trim();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="first">
  <li>
    <p>test one</p>
  </li>
</ul>
<ul class="second">
  <li>
    <input type="radio" name="wis_con_q10_q3" value="Yes">
    <input type="radio" name="wis_con_q10_q3" value="No" checked="">
  </li>
</ul>
<ul class="first">
  <li>
    <p>text tow</p>
  </li>
</ul>
<ul class="second">
  <li>
    <input type="radio" name="wis_con_q10_q4" value="Yes">
    <input type="radio" name="wis_con_q10_q4" value="No" checked="">
  </li>
</ul>

您必须进行检查才能查看值