Javascript jquery是否将元素添加到第一个子元素？

我有一个带有两个按钮的简单部分，这些元素是动态创建的，我想使用jquery将输入附加到第一个按钮

这是我的解决办法

HTML

回去
提交
未定义

Js

var getButons=$（'.video btns'）.attr（'buttonid'）；
var targetmovieid=$（videobtns.attr（'targetmovieid'）；
if（getButons==81&&targetmovieid==undefined）{
变量inputf=$（“”）；
inputf.appendTo（'.video btn'）；
}否则{
log（“他妈的出了什么问题”）；
}

现在，当我运行我的应用程序时，我得到以下结果

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

回去
提交
未定义

我的代码添加到两个按钮我只想添加到按钮

buttonid=81

---

我做错了什么？

您正在将输入添加到.video btns类，因此元素被添加到两个按钮中。尝试使用Id而不是类追加

编辑：

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 }));

  }
})

var$btn=$（'.video btn'）；
$。每个（$btn，（索引，当前btn）=>{
if（$（currentBtn）.attr（'buttonid'）='81'&&&$（currentBtn.attr（'targetmovieid'）==“未定义”）
{ 
$（currentBtn）.append（$（“”，{id:'username'，style:'background:red'，class:'sync element'，starttime:3，endtime:6}））；
}
})

$（'.video btn'）。每个（函数（）{
var getButons=$（this.attr（'buttonid'）；
var targetmovieid=$（this.attr（'targetmovieid'）；
如果（getButons==81&&targetmovieid==undefined'）{
变量inputf=$（“”）；
输入附录（本）；
}否则{
log（“他妈的出了什么问题”）；
}
});

您将

附件定位到所有具有class
视频BTN
的元素，而不仅仅是具有
if
条件中指定的两个属性的元素。此外，当您获得jQuery集合的
attr（）
时，您将获得该集合中第一个元素的结果，而不是该集合中任何元素的结果

通过使用方括号表示法，立即选择所需的按钮，包括选择器中两个属性的条件，可以简化您的生活：


var$btn=$（'.video btn[buttonid=81][targetmovieid=undefined]）；
如果（！$btn.长度）{
console.log（'有些事情非常不对劲'）；
}否则{
$btn.append（$（“”，{id:'username'，style:'background:red'，class:'sync element'，starttime:3，endtime:6}））；
}

回去
提交
未定义

改为使用var getButons=$（'.video btns'），然后通过结果$.each（getButons）循环检查每个项目的按钮ID

<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');
    }

  })



})

$（文档）.ready（函数（）{
var getButons=$（'.video btns'）；
$.each（getButons，function（）{
var targetmovieid=$（this.attr（'targetmovieid'）；
if（$（this.attr（“buttonid”）==81&&targetmovieid==undefined'）{
变量inputf=$（“”）；
inputf.appendTo（$（this））；
}否则{
log（‘家庭秀出错了’）；
}
})
})
不确定这是否是您想要的，但如果您将JS代码更改为：

$('.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));  
    }
});

$（'.video btn'）。每个（函数（键、值）{
让buttonid=$（this.attr（“buttonid”）；
设targetmovieid=$（this.attr（“targetmovieid”）；
console.log（buttonid+'，'+targetmovieid）
如果（buttonid==81&&targetmovieid=='undefined'）{
变量inputf=$（“”）；
inputf.appendTo（$（this））；
}
});

@Tyddlywink提到，它会将输入附加到符合条件的按钮上，通过循环来获得匹配的按钮

您可能会对buttonid和targetmovieid进行一些过滤或传入一些参数，使其更通用以满足您的需要。
因此不清楚您想要做什么。
var getButons=$（'.video btns'）
然后循环遍历结果
$。每个（getButons）
检查每个项目的按钮。什么是
VideoBTN
？@trincot按钮类？@Tyddlywink您能通过代码显示您的解决方案吗？
<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>

$(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');
    }

  })



})

$('.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));  
    }
});