jQuery的第一个孩子添加元素?

时间:2019-07-14 20:02:26

标签: javascript jquery html

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

这是我的解决方法

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

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

<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添加到按钮 我在做什么错了?

5 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

不确定这是否是您要查找的内容,但是如果您将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));  
    }
});

@Tyddlywink提到,它将通过遍历并获取匹配的按钮将输入追加到满足您条件的按钮上。

您可能可以对buttonid和targetmovieid进行一些过滤或传递一些参数,以使其更通用,以满足您的需求。

答案 2 :(得分:0)

您要将appendTo定位为类为video-btns所有元素,而不仅仅是具有if条件中指定的两个属性的元素。此外,当您获得jQuery集合的attr()时,将获得该集合中 first 元素的结果,而不是该集合中 any 的结果。

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

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>

答案 3 :(得分:0)

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

执行此操作,而不是var getButons = $('。video-btns'),然后遍历结果$ .each(getButons),检查每个项目的buttonid。

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

  })



})

答案 4 :(得分:-2)

您将输入追加到.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 }));

  }
})