Find text using jQuery?

Question

Here is my 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>

How to wrap text 'checkbox list' and 'checkbox list02' inside a label tag in same place

i want result like this :

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

I do not understand what you are trying to do. Can you maybe post a result example? — Grrbrr404, Jan 09 '12 at 07:21
You're making the markup up much harder than it needs to be with all of those spans. — Christopher Marshall, Jan 09 '12 at 07:32
yes i am using package of umbraco framework ( pliable form ). there is no option to change this layout structure. — Sanooj, Jan 09 '12 at 07:43

score 7 · Accepted Answer · answered Jan 09 '12 at 07:27

7

To wrap a text subnode in a <p> container you can do something like this

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

answered Jan 09 '12 at 07:27

devnull69

16,402
8
50
61

score 3 · Answer 2 · answered Jan 09 '12 at 07:24

Your markup is invalid.

The ID attribute needs to be unique to each element whereas you have multiple ID's of the same name.

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>

You may want to look into using an unordered/ordered list as well.

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>

Find text using jQuery?

2 Answers2

Linked