Question

这是我的HTML

<p> checkbox list 
  <span> 
    <span>
      <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
    </span>
    <span>
      <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
    </span> 
  </span>
</p>
<p> checkbox list 02
  <span> 
    <span>
       <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
    </span>
    <span>
       <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
    </span> 
  </span>
</p>

如何在同一位置的label标记内包含文本“复选框列表”和“复选框列表02”

我想要这样的结果：

 <p> <label>checkbox list </label>
      <span> 
        <span>
          <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
        </span>
        <span>
          <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
        </span> 
      </span>
    </p>
    <p> <label>checkbox list 02</label>
      <span> 
        <span>
           <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
        </span>
        <span>
           <input type="checkbox" name="checkbox" value="checkbox" id="apple" />
        </span> 
      </span>
    </p>

Answer 1

要将文本子节点包装在<p>容器中，您可以执行类似这样的操作

$('p').contents().filter(function() {
    return this.nodeType == 3;
}).wrap('<label/>');

Answer 2

您的标记无效。

每个元素的ID属性必须是唯一的，而您有多个同名的ID。

e.g。

<p>checkbox list</p>
<label>checkbox1<input type="checkbox" value="" name="apple1" id="apple1"/></label>
<label>checkbox1<input type="checkbox" value="" name="apple2" id="apple2"/></label>

<p>checkbox list2 </p>
<label>checkbox1<input type="checkbox" value="" name="apple3" id="apple3"/></label>
<label>checkbox1<input type="checkbox" value="" name="apple4" id="apple4"/></label>

您可能也希望使用无序/有序列表。

e.g。

<ul>
<li><label>checkbox1<input type="checkbox" value="" name="apple3" id="apple1"/></label></li>
<li><label>checkbox2<input type="checkbox" value="" name="apple3" id="apple2"/></label></li>
<li><label>checkbox3<input type="checkbox" value="" name="apple3" id="apple3"/></label></li>
</ul>

使用jQuery查找文本？

2 个答案: