javascript如何得到多个div中的所有a元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript如何得到多个div中的所有a元素相关的知识,希望对你有一定的参考价值。

加入有2个div,每个下面各有2个<a>对象,希望得到一个数组,每个数组元素是一个<a>对象(不要是二维数组)。希望算法有效率,不要是自己遍历添加。
我现在的代码是这样:
var d=document.getElementsByTagName("div");
var x=new Array();//in-div anchor set
for(i=0; i<d.length; i++)
var tmp=dSet[i].getElementsByTagName("a");
x=x.concat(tmp);

但是结果得到一个2维数组,比如要访问第一个div的第一个a,需要调用x[0][0]。请问如何修改呢?
网页是服务器返回的,不能修改。不然我自己用getElementsByTagName("a")就可以得到了。
我想知道的主要是concat的方法为什么是按数组添加的,而不是数组元素添加的。

这一句就是文档中所有的a标签 document.getElementsByTagName("a");

如果你非要这两个div下a标签的话,可以给这两个div外面套一个父div,加上id最好,这样就可以直接写了,例如
document.getElementById("patent").document.getElementsByTagName("a");
参考技术A 很奇妙的问题,求解未果。
不过jQuery中这样就行 $("div a")本回答被提问者采纳
参考技术B 你可以在<a>连接加NAME 加属性!然后就可以取了! 参考技术C <script>
window.onload =function()
var d=document.getElementsByTagName("div");
var x=new Array();
for(i=0; i<d.length; i++)
var tmp=d[i].getElementsByTagName("a");
for(var j=0;j<tmp.length;j++)
x.push(tmp[j]); //两次循环,用push方法压入一个数组中。

alert('A元素个数:'+x.length+'\n\n'+x);

</script>
<div><a href="http://www.baidu.com">1111111111111</a> <a href="http://zhidao.baidu.com">22222222222</a></div>
<div><a href="http://mp3.baidu.com">333333333333</a><a href="hi://www.baidu.com">44444444444</a></div>

如何删除div中的div和所有元素? Javascript,html,css

我有一个函数,清除整个div,它消失但仍然出现在inspect(html)中。这是一个真正的问题,因为我们在电子邮件中有这个输入类型字段,我在电子邮件中获得了这个空数据。我只想在没有选择此值时将我从html中删除并检查。查看我的代码并尝试捕获错误。你需要注意的整个代码中最重要的事情是html中的onchange="checkSelected()"和用它操纵的第一个脚本标记。它应该只是一个显示器,但它仍然站在那里。

<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content" style="display: flex;">



         <div class="modal-body">


            <form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">

               <div class="container-fluid">

                  <div class="step_1"  >
                     <h3 class="modal-title">Reifenmontage Termin buchen  </h3>
                     <div class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Pneu-Typ</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                           <div class="row">
                              <select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
                                 <option value="Motorrad">Motorrad</option>
                                 <option value="Auto">Auto</option>
                              </select>
                           </div>
                        </div>
                     </div>
                     <div id="additionalRow"  class="row termin_row" >
                     <div id="reifenmontage-input" class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Mark und model</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select name="marka" class="form-control" id="button-getdata">
                              </select>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select name="model" class="form-control" id="result" > 
                              </select> 
                           </div>
                        </div>

                     </div>
                     </div>
                     <div class="row termin_row">
                        <div class="col-sm-4 col-xs-12">
                           <div class="row"><label>2. Terminvorschlag</label></div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group date" id="date-2" data-termin="1">
                                 <input type='text' class="form-control" name="date[1]" />
                                 <span class="input-group-addon">um</span>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group time" id="time-2" data-termin="1">
                                 <input type='text' class="form-control" name="time[1]" />
                                 <span class="input-group-addon">Uhr</span>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="row">
                        <div class="checkbox">
                           <label>
                              <input type="checkbox" name="accept" id="accept"> Ich akzeptiere die <a href="teilnahmebedingungen" target="_blank">Teilnahmebedingungen</a>
                           </label>
                        </div>
                     </div>

                     <div class="row text-center">
                        <button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
                     </div>
                  </div>

                  <div class="step_2">
                     <h3 class="modal-title">Your contact info</h3>

                     <div class="">
                        <div class="form-group clearfix">
                           <input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
                        </div>
                        <div class="text-center">
                           <button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
                        </div>
                     </div>

                  </div>

               </div>

            </form>

         </div>
         <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
         </div>
      </div>
   </div>
</div> 

和我的脚本标签

<script type="text/javascript">
   let selectItem = document.getElementById('pneu');
   let additionalRow = document.getElementById('additionalRow');
   function checkSelected() 
      if (selectItem.selectedIndex == "1") 
         additionalRow.style.display = 'none';
       else 
         additionalRow.style.display = 'block';
      
   
</script> 

<script type="text/javascript">
$('#button-getdata').on('change', function() 
    $.ajax(
        url: 'index.php?route=api/reifenmontage/get_marka_data',
        type: 'post',
        data: $('#reifenmontage-input select'),
        dataType: 'json',
        beforeSend: function() 

        ,
        success: function(json) 

            if (json['success']) 
               $("#result").empty();
                for (i in json['success']) 
                var element = json['success'][i];
                var o = new Option(element['model'], element['model']);
               $("#result").append(o);
                    html = "\t<option   value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
                    $("#result").append(o); 
                
               //  document.getElementById("schedule_form").reset();
               

        
    );
);
</script>  

<script type="text/javascript">

$.ajax(
 url: 'index.php?route=api/reifenmontage/mark',
 context: document.body,
 success: function(data) 
   const selectControl = $('#button-getdata');
   selectControl.html(data.map(ExtractData).join(''));
 
);

function ExtractData(item) 
return ` <option value="$item.value">$item.label</option>`;


</script>
答案

尝试使用分离/附加DOM元素的变体

<script type="text/javascript">
   let selectItem = document.getElementById('pneu');
   //let additionalRow = document.getElementById('additionalRow');
   let detached = '';
   function checkSelected() 
      if (selectItem.selectedIndex == "1") 
         detached = $('#reifenmontage-input').detach();
       else 
         detached.appendTo('#additionalRow');
      
   
</script> 

以上是关于javascript如何得到多个div中的所有a元素的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript-如何使用输入字段动态创建多个 div

如何删除div中的div和所有元素? Javascript,html,css

Python中的多个元组

javascript 如何获取div中的label标签的宽度?

javascript如何在div的后面添加一个其他的元素

如何使用javascript从多个div中仅复制一个DIV到剪贴板