0

I need to append this element <span>my custom text</span> inside the <span class="tc-label tm-label">1</span> element when the checkbox#tmcp_choice_3_0_8 is checked.

Problem is that I can get target the span element by its class 'tm-label' because there are other elements with the same class.

My idea is to get the parent html of the checkbox and then to target the 'span.tm-label' but I can't get to get the parent. I tried with: 

  aa = $("input#tmcp_choice_3_0_8");
alert( aa.parent());

But I just get an alert with this text: "[object Object]"

Real HTML

<label for="tmcp_choice_3_0_8">    
    <input class="tmcp-field tmhexcolor_3_0_8 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_3_0" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;0&quot;]" data-original-rules="[&quot;0&quot;]" data-rulestype="[&quot;&quot;]" value="1_0" id="tmcp_choice_3_0_8" tabindex="8" type="checkbox" disabled="disabled">

    <span for="tmcp_choice_3_0_8"></span>
    <span class="tc-label tm-label">1</span>

</label>
isherwood
  • 58,414
  • 16
  • 114
  • 157
JPashs
  • 13,044
  • 10
  • 42
  • 65
  • 1
    That should work... what are you seeing that makes you think it's not working? – Heretic Monkey Jun 20 '18 at 20:17
  • @MikeMcCaughan I get an alert with this text: "[object Object]" – JPashs Jun 20 '18 at 20:18
  • See [what does \[object Object\] mean?](https://stackoverflow.com/questions/8892465/what-does-object-object-mean-javascript) – showdev Jun 20 '18 at 20:20
  • That's because jQuery returns objects. – isherwood Jun 20 '18 at 20:20
  • You *are* selecting the parent element, you just aren't outputting it properly. Try appending it somewhere instead. – isherwood Jun 20 '18 at 20:22
  • If you want to get that span, use [`aa.siblings(".tm-label")`](http://api.jquery.com/siblings/). I also strongly suggest taking a bit of time to learn how to debug scripts using a proper debugger, so that you are not reliant on `alert`. – Heretic Monkey Jun 20 '18 at 20:25

2 Answers2

1

The following works for me:

1, Create the span

2, Find and append to: .tc-label.tm-label

$(function(){
 var $span = $('<span/>').text('my custom text');
 $("input#tmcp_choice_3_0_8").parent().find('.tc-label.tm-label').append( $span );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="tmcp_choice_3_0_8">    
    <input class="tmcp-field tmhexcolor_3_0_8 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_3_0" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;0&quot;]" data-original-rules="[&quot;0&quot;]" data-rulestype="[&quot;&quot;]" value="1_0" id="tmcp_choice_3_0_8" tabindex="8" type="checkbox" disabled="disabled">

    <span for="tmcp_choice_3_0_8"></span>
    <span class="tc-label tm-label">1</span>

</label>
Samuel Cook
  • 16,620
  • 7
  • 50
  • 62
  • It works fine. Is there any way to add a class name to the span appended? – JPashs Jun 20 '18 at 20:28
  • sure thing! check out this for adding classes to jquery created elements. it's easy: https://stackoverflow.com/questions/7833701/how-to-create-div-with-class – Samuel Cook Jun 20 '18 at 20:38
0

If there are multiple objects selected, what you need to do is to select one of them from that array of objects. Example on selecting first element: aa[0].parent()

Denis Rakhmanov
  • 75
  • 7