1
votes

jquery ajouter un élément au premier enfant?

J'ai une section simple avec deux boutons ces éléments sont créés dynamiquement, je veux ajouter une entrée à un premier bouton en utilisant jquery.

Voici ma solution

HTML

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

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

Maintenant, lorsque j'exécute mon application, j'obtiens le résultat suivant

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

Mon code s'ajoute aux deux boutons que je veux juste ajouter au bouton avec buttonid = 81 qu'est-ce que je fais de mal?

javascript jquery html

7 commentaires

Je ne sais pas ce que tu veux

faites-le à la place var getButons = $ ('. video-btns') puis parcourez les résultats $ .each (getButons) en vérifiant le buttonid de chaque élément.

Qu'est-ce que videobtns ?

@trincot classe d'un bouton?

@Tyddlywink pouvez-vous montrer votre solution via le code?

Vous ne donnez jamais de valeur à videobtns . C'est indéfini.

Le code affiché n'ajoutera rien car l'utilisation de attr () comme getter ne renvoie que la valeur du premier élément de la collection et ces attributs ne correspondent pas au premier en fonction du if ()

5 Réponses :

-2
votes

Vous ajoutez l'entrée à la classe .video-btns, et par conséquent l'élément est ajouté aux deux boutons. Essayez d'ajouter en utilisant l'identifiant au lieu de la classe.

Modifié:

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

  }
})

0 commentaires

3
votes

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

0 commentaires

0
votes

Vous ciblez appendTo sur tous les éléments avec la classe video-btns , pas seulement celui avec les deux attributs comme spécifié dans le si condition. De plus, lorsque vous obtenez attr () d'une collection jQuery, vous obtenez le résultat pour le premier élément de cette collection, et non pour aucun dans

Vous pouvez vous simplifier la vie en sélectionnant immédiatement le bouton dont vous avez besoin, y compris les conditions sur les deux attributs dans le sélecteur, en utilisant la notation entre crochets :

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

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

0 commentaires

0
votes

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

faites-le à la place var getButons = $ ('. video-btns') puis parcourez les résultats $ .each (getButons) en vérifiant le buttonid de chaque élément.

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

  })



})

Javascript: p >

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

0 commentaires

2
votes

Je ne sais pas si c'est ce que vous recherchez, mais si vous changez votre code JS en ceci:

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

Il ajoutera l'entrée aux boutons qui répondent à vos critères en passant en boucle et obtenir ceux qui correspondent, @Tyddlywink mentionne.

Vous pourriez probablement faire un filtrage ou passer des paramètres pour le buttonid et le targetmovieid pour le rendre plus généralisé en fonction de vos besoins.

0 commentaires