Question

我写了这个：

   <html>
    <head>

    <script type="text/javascript" src="jquery.js"></script>
    <script> jQuery(document).ready(function($)
     { $("div.productInfo").wrap("<div id='productDetails' />"); 
            $("ul.productInfo").wrap("<div id='specs' />");
      $("#centerColumn" + "#rightColumn").wrap("<div id='test' />");
     });
     </script>


    </head>
    <body>
    <p id="centerColumn" >This is a paragraph.</p>
    <p id="rightColumn" >This is another paragraph.</p>
    <div class="productInfo" > Wow </div>

    </body>
    </html>

并且#centerColumn只包含#rightColumn get包裹，为什么？

Answer 1

您正在使用此选择器：

$("#centerColumn" + "#rightColumn")

+有连接运算符。它连接字符串，因此您的代码与此相同：

$("#centerColumn#rightColumn")

这显然没有任何用处。

我想你想要multiple selector：

$("#centerColumn, #rightColumn").wrap("<div id='test' />");

如果要将两列都包装在相同的祖先元素中，则需要wrapAll。这似乎可能是因为您为包装元素提供了id和id属性必须是唯一的。

$("#centerColumn, #rightColumn").wrapAll("<div id='test' />");

Answer 2

也许是因为：

$("#centerColumn" + "#rightColumn").wrap("<div id='test' />");

应该是这样的：

$("#centerColumn,#rightColumn").wrap("<div id='test' />");

Answer 3

<html>
<head>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            $("div.productInfo")
                .wrap("<div id='productDetails'><div id='specs' /></div>");
            $("#centerColumn, #rightColumn").wrapAll("<div id='test' />");
            // or .wrap() instead of .wrapAll() depends on your intentions
        });
    </script>
</head>
<body>
    <p id="centerColumn">This is a paragraph.</p>
    <p id="rightColumn">This is another paragraph.</p>
    <div class="productInfo"> Wow </div>
</body>
</html>

另见：

.wrap()
.wrapAll()
Selectors在jQuery Docs

.wrap没被包裹

3 个答案: