Отправка формы данных javascript в сервлет: получение данных о вложенном элементе рядом с кнопкой

Question

У меня есть этот простой html с видеодивом и кнопкой:

<div class = "video-row">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="add-button green-button light-button">Add video</div>


</div>

Я хочу отправить данные видео src сервлету java по нажатию кнопки:

$(document).on("click", ".add-button", function () {  
           sendData();
});

var sendData = function()  {
    $.ajax({
        url: "addcomedian",
        type: "post", //send it through get method
        data: {
            number: 4,
            sender: "add-button",
            url: url,
        },
     success:
        ...
}

Как получить URL-адрес видео, значение тега src? На странице будет много таких видео и кнопка добавления для каждого видео.

Answer 1

Найдите родительский элемент, по которому щелкнули, затем найдите iframe дочерний элемент:

$(document).on("click", ".add-button", function (event) {  
  var button = $(event.target); // Find the button that was clicked
  // Find the video element, first finding the parent
  var videoElement = button.parents(".video-row").find("iframe");
  console.log(videoElement.attr("src")); // get the 'src' attribute
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "video-row">
  <iframe width="160" height="90" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <div class="add-button green-button light-button">Add video</div>
</div>