Question

我在3个模态元素中嵌入了iframe文本元素，每个元素都有一个“复制”按钮。当我单击一个复制按钮时，我需要获取特定iframe文本的输出。如果我使用

$(".embed-iframe-text").text();

它将一起输出所有三个iframe文本。为了避免这种情况并获取特定的iframe文本，我使用了

$(this).closest(".embed-iframe-text").text();

但无法获取输出。怎么了？

$(".copy-iframe").on("click", function() {
	var m = $(".embed-iframe-text").text();
        var n = $(this).closest(".embed-iframe-text").text();
	alert(n);
	});

.embed-iframe-text, .embed-src span {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- modal 1 -->
<div class="modal-body">
	<div class="embed-iframe">
		<span class="embed-iframe-text">
			&lt;iframe width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
	</div>
	<div class="embed-button">
		<div class="embed-src">
			<span>Dynamic text here</span>
		</div>
		<button type="button" class="btn btn-primary copy-iframe">Copy</button>
	</div>
</div>

<!-- modal 2 -->
<div class="modal-body">
	<div class="embed-iframe">
		<span class="embed-iframe-text">
			&lt;iframe width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
	</div>
	<div class="embed-button">
		<div class="embed-src">
			<span>Dynamic text here</span>
		</div>
		<button type="button" class="btn btn-primary copy-iframe">Copy</button>
	</div>
</div>

<!-- modal 3 -->
<div class="modal-body">
	<div class="embed-iframe">
		<span class="embed-iframe-text">
			&lt;iframe width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
	</div>
	<div class="embed-button">
		<div class="embed-src">
			<span>Dynamic text here</span>
		</div>
		<button type="button" class="btn btn-primary copy-iframe">Copy</button>
	</div>
</div>

Answer 1

var n = $(this).closest(".embed-iframe-text").text();

这不会起作用，因为它不在同一个级别上，您需要转到父项并在其中查找项目。

使用.parents('.modal-body').find(".embed-iframe-text")

$(".copy-iframe").on("click", function() {
  var m = $(".embed-iframe-text").text();
  var n = $(this).parents('.modal-body').find(".embed-iframe-text").text();
  console.log(n)
});

.embed-iframe-text,
.embed-src span {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- modal 1 -->
<div class="modal-body">
  <div class="embed-iframe">
    <span class="embed-iframe-text">
			&lt;iframe1 width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
  </div>
  <div class="embed-button">
    <div class="embed-src">
      <span>Dynamic text here</span>
    </div>
    <button type="button" class="btn btn-primary copy-iframe">Copy</button>
  </div>
</div>

<!-- modal 2 -->
<div class="modal-body">
  <div class="embed-iframe">
    <span class="embed-iframe-text">
			&lt;iframe2 width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
  </div>
  <div class="embed-button">
    <div class="embed-src">
      <span>Dynamic text here</span>
    </div>
    <button type="button" class="btn btn-primary copy-iframe">Copy</button>
  </div>
</div>

<!-- modal 3 -->
<div class="modal-body">
  <div class="embed-iframe">
    <span class="embed-iframe-text">
			&lt;iframe3 width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
  </div>
  <div class="embed-button">
    <div class="embed-src">
      <span>Dynamic text here</span>
    </div>
    <button type="button" class="btn btn-primary copy-iframe">Copy</button>
  </div>
</div>

我刚刚从评论中意识到，或.closest('.modal-body').find(".embed-iframe-text")也可以工作。这将首先找到父模态主体，然后是孩子。

.this元素中的jQuery最接近的（）不起作用

1 个答案: