CODEWITHSUNDEEP
javascriptjqueryhtml
The Dead Man
The Dead Man

Reputation: 5556

jquery add element to first child?

I have a simple section with two buttons these elements are created dynamically, I want to append input to a first button using jquery.

Here is my solution

HTML 

<div id="interactive-layers">
    <div class="go_back">Go back</div>
    <div buttonid="3" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
        <span class="label">Submit</span></div>
    <div buttonid="81" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
        <span class="label">undefined</span></div>
</div>

Js 

 var getButons = $('.video-btns').attr('buttonid');
    var targetmovieid = $(videobtns).attr('targetmovieid');
    if(getButons == 81 && targetmovieid =='undefined'){
        var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'></input>");
            inputf.appendTo('.video-btns');  
    }else{
        console.log('something is fucking wrong');
    }

Now when I run my app I get the following result

<div id="interactive-layers">
    <div class="go_back">Go back</div>
    <div buttonid="81" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
         <span class="label">Submit</span>
        <input id="username" style="background: red" class="sync-element" starttime="3" endtime="6">
    </div>
    <div buttonid="3" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
      <span class="label">undefined</span>
        <input id="username" style="background: red" class="sync-element" starttime="3" endtime="6">
    </div>
</div>

My code adds to both buttons I just want to add to the button with buttonid=81 what am I doing wrong?

Upvotes: 1

Views: 126

Answers (5)

rudy0807
rudy0807

Reputation: 152

You are appending the input to .video-btns class, and hence the element is getting added to both the buttons. Try appending using the Id instead of the class.

Edited:

var $btn = $('.video-btns');
$.each($btn, (index, currentBtn) => {
    if($(currentBtn).attr('buttonid') == '81' && $(currentBtn).attr('targetmovieid') == "undefined")
 { 
      $(currentBtn).append($("<input>", { id: 'username', style: 'background: red', class: 'sync-element', starttime: 3, endtime: 6 }));

  }
})

Upvotes: -2

SScotti
SScotti

Reputation: 2328

Not sure if this is what you are looking for, but if you change your JS code to this:

$('.video-btns').each(function(key, value) {
    let buttonid = $(this).attr("buttonid");
  let targetmovieid = $(this).attr("targetmovieid");
  console.log(buttonid + ', ' + targetmovieid)
     if(buttonid == 81 && targetmovieid =='undefined'){
        var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'></input>");
        inputf.appendTo($(this));  
    }
});

It will append the input to the buttons that meet your criteria by looping through them and getting those that match, @Tyddlywink mentions.

You could probably do some filtering or pass in some parameters for the buttonid and the targetmovieid to make it more generalized to suit your needs.

Upvotes: 2

trincot
trincot

Reputation: 349954

You are targeting the appendTo to all elements with class video-btns, not just the one with the two attributes as specified in the if condition. Furthermore, when you get attr() of a jQuery collection, you get the result for the first element in that collection, not of any in that collection.

You can make your life easier by selecting immediately the button you need, including the conditions on the two attributes in the selector, using the square bracket notation:

var $btn = $('.video-btns[buttonid=81][targetmovieid=undefined]');
if (!$btn.length) {
    console.log('something is very wrong');
} else {
    $btn.append($("<input>", { id: 'username', style: 'background: red', class: 'sync-element', starttime: 3, endtime: 6 }));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="interactive-layers">
    <div class="go_back">Go back</div>
    <div buttonid="3" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
        <span class="label">Submit</span></div>
    <div buttonid="81" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
        <span class="label">undefined</span></div>
</div>

Upvotes: 0

Tyddlywink
Tyddlywink

Reputation: 891

https://jsfiddle.net/tyddlywink/6b2frvz8/

do this instead var getButons = $('.video-btns') then loop through the results $.each(getButons) checking the buttonid of each item.

<div id="interactive-layers">
  <div class="go_back">Go back</div>
  <div buttonid="3" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
    <span class="label">Submit</span></div>
  <div buttonid="81" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
    <span class="label">undefined</span></div>
</div>

Javascript:

$(document).ready(function() {

  var getButons = $('.video-btns');

  $.each(getButons, function() {

    var targetmovieid = $(this).attr('targetmovieid');

    if ($(this).attr("buttonid") == 81 && targetmovieid == 'undefined') {
      var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'>  </input>");
      inputf.appendTo($(this));
    } else {
      console.log('something is Family Show wrong');
    }

  })



})

Upvotes: 0

DanKud
DanKud

Reputation: 221

$('.video-btns').each(function() {
    var getButons = $(this).attr('buttonid');
    var targetmovieid = $(this).attr('targetmovieid');
    if (getButons == 81 && targetmovieid == 'undefined') {
        var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'></input>");
        inputf.appendTo(this);
    } else {
        console.log('something is fucking wrong');
    }
});

Upvotes: 3

Related Questions