Question

我有这段代码

 <div class="carousel-inner" role="listbox">

     <div class="item">
        <img src="http://" alt="">
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://" alt="">
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>

</div>

我想仅在第一个div中替换<img src = "" alt = "">和<video> <source src = ""> </ video>。

要清理div我找到了这段代码。但不是第一个。这是第一个问题。

$('.item").empty();

要编写新代码来播放视频，我应该使用以下代码：

$(".item").html('<video><source src=""></video>');

我不能写一个好的javascript代码来做我解释你的事情。 PS。我无法更改第一个代码，因为它是图像的默认滑块。谢谢你的帮助。

Answer 1

试试这个，querySelector()只选择一个选择器，第一个匹配的选择器：

document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';

Answer 2

如果您想使用jquery，可以使用replaceWith()和:first伪选择器来选择和重新生成第一个<img>：

＆＃13;

$(function () {
  $('img:first').replaceWith('<video><source src=""></video>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">

     <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>
      <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>

</div>

＆＃13;

不要让Jquery完成它。 Document.querySelector()仅返回与指定选择器匹配的第一个元素，并使用replaceChild（https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/）重新生成它：

＆＃13;

var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);

＆＃13;

<div class="carousel-inner" role="listbox">
     <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>
      <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>

</div>

＆＃13;

Answer 3

您可以使用jQuery replaceWith()方法实现此目的，如下所示..您可以根据需要修改选择器

＆＃13;

$('img:first').replaceWith( "<video><source src=""></video>" );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">

     <div class="item">
        <img src="" alt="">
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>
      <div class="item">
        <img src="" alt="">
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>

</div>

＆＃13;

JS删除div内容并编写新代码

3 个答案: