Can jquery add a tag to img?-Front-end Q&A-php.cn

Can jquery add a tag to img?

青灯夜游

Release： 2022-12-16 16:42:20

Original

2473 people have browsed it

Can be added; in jquery, you can use the wrap() function to add the parent tag a to the img element. Adding method: 1. Use the jquery selector to select the img element object, the syntax "$("img")"; 2. Use the wrap() function to add a specified parent element to the obtained element object, the syntax "img element object.wrap( "")".

Can jquery add a tag to img?

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

jquery can add a tag to img

To add a tag to img is to add an a tag outside the img tag:

<a href="">
<img  id="img" src="img/2.jpg"    style="max-width:90%"/ alt="Can jquery add a tag to img?" >
</a>

Copy after login

In simple terms , which is to add a parent element (a tag) to the img tag.

In jquery, you can use the wrap() function to add a parent tag to a specified element.

The wrap() method wraps each selected element with the specified HTML element.

Implementation example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("img").wrap("<a href=&#39;#&#39;></a>");
				});
			});
		</script>
		<style type="text/css">
			a {
				background-color: yellow;
			}
		</style>
	</head>
	<body>

		<img  src="img/1.jpg"    style="max-width:90%"/ alt="Can jquery add a tag to img?" > 
		<img  src="img/2.jpg"    style="max-width:90%"/ alt="Can jquery add a tag to img?" ><br><br>
		<button>给每个img元素包裹一个a元素</button>

	</body>
</html>

Copy after login

Can jquery add a tag to img?

wrap() method description

wrap() method usage Wrap each selected element with the specified HTML element, that is, add a parent element outside the selected element.

This kind of wrapping is most useful for inserting additional structured markup into the document without destroying the semantic quality of the original document. The principle of this function is to examine the first element provided (which is dynamically generated from the provided HTML markup code) and find the top-level ancestor element in its code structure - this ancestor element is the wrapping element. This function cannot be used when the element in the HTML markup code contains text. Therefore, if you want to add text, you should add it after the package is completed.

Grammar:

$(selector).wrap(html|ele|fn)

Copy after login

Can jquery add a tag to img?

Parameter description:

html Parameter description: Use a new Wrap the created div

$("p").wrap("<div class=&#39;wrap&#39;></div>");

Copy after login

elem parameter description: Wrap each paragraph with a div with the ID "content"

$("p").wrap(document.getElementById(&#39;content&#39;));

Copy after login

Callback function description: Use the content of the original div as the class of the new div, and wrap each element

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$(&#39;.inner&#39;).wrap(function() {
  return &#39;<div class="&#39; + $(this).text() + &#39;" />&#39;;
});

Copy after login

Result:

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

Copy after login

【Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of Can jquery add a tag to img?. For more information, please follow other related articles on the PHP Chinese website!