suchen

Heim  >  Artikel  >  Web-Frontend  >  Anwendungsbeispiele der Methode wrapInner() in jQuery

Anwendungsbeispiele der Methode wrapInner() in jQuery

巴扎黑
巴扎黑Original
2017-06-24 14:13:211103Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung der Methode „wrapInner()“ in jQuery vorgestellt. Er analysiert die Funktion und Definition der Methode „wrapInner()“ und zeigt anhand von Beispielen, wie man passende Elemente umschließt dazu

Das Beispiel in diesem Artikel beschreibt die Verwendung der Methode wrapInner() in jQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Diese Methode verwendet den angegebenen HTML-Inhalt oder das angegebene HTML-Element, um den passenden Elementinhalt zu umschließen.

Syntax 1:

Verwenden Sie das angegebene DOM-Element, um den Inhalt des passenden Elements zu umschließen.

Der Code lautet wie folgt:

$(selector).wrapInner(elem)

Parameterliste:

Parameter
参数 描述
elem 用于包裹目标的DOM元素。
Beschreibung
elem td>DOM-Element, das zum Umschließen des Ziels verwendet wird.

Beispiel:

Der Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
   p
   {
      width:200px;
      height:200px;
      border:1px solid blue;
   }
   p
   {
      width:150px;
      height:150px;
      border:1px solid red;
   }
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(
document
).ready(function(){
        $("button").click(function(){
            $("p").wrapInner(document.createElement("p"));
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

Syntax 2:

Verwenden Sie Funktion gibt das Element zurück, das zum Umschließen des Inhalts des übereinstimmenden Elements verwendet wird.

Der Code lautet wie folgt:

$(selector).wrapInner(function)

Parameterliste:

Parameter
参数 描述
function 返回用于包裹匹配元素内容的函数。
Beschreibung
function td>Gibt eine Funktion zurück, die zum Umbrechen des Inhalts des übereinstimmenden Elements verwendet wird .

实例:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
    p
   {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    p
   {
        width:150px;
        height:150px;
        border:1px solid red;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
           $("p").wrapInner(function(){
              return "<p></p>"
           });
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

语法三:

用html标记代码包裹匹配元素的内容。

代码如下:

$(selector).wrapInner(html)

参数列表:

参数 描述
html 用于包裹匹配元素内容的html标记代码。

实例:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
     p
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    p
   {
        width:150px;
        height:150px;
        border:1px solid red;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").wrapInner("<p></p>");
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

Das obige ist der detaillierte Inhalt vonAnwendungsbeispiele der Methode wrapInner() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der jQuery.wrapInner()-FunktionNächster Artikel：Detaillierte Erläuterung der Verwendung der jQuery.wrapInner()-Funktion

In Verbindung stehende Artikel

Mehr sehen