Get content inside a tag

Question

Get content inside a tag

Navigation

#1 by (1 votes)
#2 by (0 votes)

-2

I have this playlist script, in it I wanted the name of the selected video in the playlist to turn to P tag

$(document).ready(function() {
  video = $("#video");
  nome = $("#nome");
  init();

  function init() {
    current = 0;
    playlist = $("#playlist");
    tracks = playlist.find("li a");
    len = tracks.length;
    playlist.find("a").click(function(e) {
      e.preventDefault();
      link = $(this);
      current = link.parent().index();
      run(link);
    });
    $("#anterior").on("click", function(e) {
      current--;
      if (current == len) {
        current = 0;
        link = playlist.find("a")[0];
      } else {
        link = playlist.find("a")[current];
      }
      run($(link));
    });
    $("#proximo").on("click", function(e) {
      current++;
      if (current == len) {
        current = 0;
        link = playlist.find("a")[0];
      } else {
        link = playlist.find("a")[current];
      }
      run($(link));
    });
  }

  function run(link) {
    video.src = link.attr("href");

    nome.innerHTML = link.innerHTML

    par = link.parent();
    par.addClass("active").siblings().removeClass("active");
    video.load();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><pid="nome"></p>
<video id="video" width="200px" controls class="player" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Videonaosuportado</video><divid="anterior">proximo</div>
<div id="proximo">anterior</div>
<ul id="playlist">
  <li class="active"><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 1</a></li>
  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 2</a></li>
  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 3</a></li>
</ul>

javascript

asked by anonymous 01.09.2018 / 22:25

2 answers

0

My solution:

function run(link) {
  video.src = link.attr("href");
  par = link.parent();
  par.addClass("active").siblings().removeClass("active");
  title = $("#playlist .active").text();
  $(".nome").text(title);
  video.load();
  video.play();
  resetPlayer2();
}

02.09.2018 / 14:32

I need help with PHP language Waves on strings with CSS

score 1 · Accepted Answer

To get the name at the beginning, you just get the value, once the init() function is started and put in the <p> tag:

var nomevideo = $("#playlist .active").text();
$("#nome").text(nomevideo);

Note: it takes the tag <a> that is with the class .active , that is, active at the moment.

And then you can add within the click event of the links, to assign the value in the <p> tag, whenever a link is clicked:

nomevideo = $(this).text();
$("#nome").text(nomevideo);

When you use the array of find() , you can not define it directly in find, it is necessary to define in a variable and then execute:

tag_selecionada = $("a")[0];
link = playlist.find(tag_selecionada)

		$(document).ready(function() {
  video = $("#video");
  nome = $("#nome");
  init();

  function init(){
  	var nomevideo = $("#playlist .active").text();
  	$("#nome").text(nomevideo);
    current = 0;
    playlist = $("#playlist");
    tracks = playlist.find("li a");
    len = tracks.length;
    playlist.find("a").click(function(e) {
      e.preventDefault();
      link = $(this);
      current = link.parent().index();
      run(link);
      nomevideo = $(this).text();
  	  $("#nome").text(nomevideo);
    });
    $("#anterior").on("click", function(e) {
      current--;
      if(current < 0){
      	current = 0;
      }
      if(current == len){
        current = 0;
        tag_selecionada = $("a")[0];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      else{
        tag_selecionada = $("a")[current];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      run($(link));
    });
    $("#proximo").on("click", function(e) {
      current++;
      if(current == len){
        current = 0;
        tag_selecionada = $("a")[0];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      else{
      	tag_selecionada = $("a")[current];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      run($(link));
    });
  }

  function run(link) {
    par = link.parent();
    par.addClass("active").siblings().removeClass("active");
  }
});

<!DOCTYPE html>
 <html>
  <head>
    <meta charset = "utf-8">
    <title>teste</title>
  </head>
  <body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><pid="nome"></p>
	<video id="video" width="200px" controls class="player" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Videonaosuportado</video><buttonid="anterior">anterior</button>
	<button id="proximo">proximo</button>
	<ul id="playlist">
	  <li class="active"><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 1</a></li>
	  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 2</a></li>
	  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 3</a></li>
	</ul>
   </body>
 </html>