Question

我正在尝试从整个<div class="headWrap">标记中删除包装器h1 - h6，我只需要在点击它时包装当前标题标记。

HTML：

<h1>
    Heading Test content 1
</h1>
<h2>
    Heading Test content 2
</h2>
<h3>
    Heading Test content 3
</h3>

JS

$(function(){
    $(document).on('click', function(event){
        var clickedTag;
            clickedtag = event.target;
      event.stopPropagation();
      var headings = $('h1, h2, h3, h4, h5, h6');
      if($(clickedtag == headings)){
      $(clickedtag).wrap($('<div/>').addClass('headWrap'));
      }
  });
});

CSS

.headWrap {
  background-color:red;
  color:#fff;
}

Answer 1

你需要两件事。

包含jQuery
打开所有其他标题并仅包装点击的标题。

这是与小提琴相同的代码。我所做的只是

添加了jQuery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

添加了代码以解开每个点击事件的所有标题。

$(headings).unwrap();

＆＃13;

$(document).ready(function(){
$(document).on('click', function(event){
  		var clickedTag;
			clickedtag = event.target;
      event.stopPropagation();
      var headings = $('h1, h2, h3, h4, h5, h6');
      $(headings).unwrap();
      if($(clickedtag).is(headings)){
      $(clickedtag).wrap($('<div/>').addClass('headWrap'));
      }
  });
  });

＆＃13;

.headWrap {
  background-color:red;
  color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Heading Test content 1
</h1>
<h2>
Heading Test content 2
</h2>
<h3>
Heading Test content 3
</h3>
<p>Test</p>

＆＃13;

^{感谢gaetanoM。我错过了这一点。您不能简单地使用==。使用jQuery} .is() 来检查相似度。

Answer 2

您的问题在这一行：

if($(clickedtag == headings)){

如果你需要测试当前目标元素是否是标题元素，你可以写：

if ($(clickedtag).is('h1, h2, h3, h4, h5, h6')){

.is(selector)：针对选择器，元素或jQuery对象检查当前匹配的元素集，如果这些元素中至少有一个与给定的参数匹配，则返回true。

＆＃13;

$(document).on('click', function(event){
    var clickedTag;
    clickedtag = event.target;
    event.stopPropagation();
    if ($(clickedtag).is('h1, h2, h3, h4, h5, h6')){
        $('h1, h2, h3, h4, h5, h6').unwrap();
        $(clickedtag).wrap($('<div/>').addClass('headWrap'));
    }
});

＆＃13;

.headWrap {
    background-color:red;
    color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h1>
    Heading Test content 1
</h1>
<h2>
    Heading Test content 2
</h2>
<h3>
    Heading Test content 3
</h3>

＆＃13;

另一种方法可以基于事件委派：

$(document).on('click', 'h1, h2, h3, h4, h5, h6', function(event){

＆＃13;

$(document).on('click', 'h1, h2, h3, h4, h5, h6', function(event){
  var clickedTag;
  clickedtag = event.target;
  event.stopPropagation();
  $('h1, h2, h3, h4, h5, h6').unwrap();
  $(clickedtag).wrap($('<div/>').addClass('headWrap'));
});

＆＃13;

.headWrap {
    background-color:red;
    color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h1>
    Heading Test content 1
</h1>
<h2>
    Heading Test content 2
</h2>
<h3>
    Heading Test content 3
</h3>

＆＃13;

为了删除未点击元素的div，您可以写：

$('h1, h2, h3, h4, h5, h6').unwrap();

Answer 3

尝试类似：

$(function() {
  $(document).on('click', 'h1,h2,h3', function(event) {
      var $heading = $(this);
      //unwrap others (if they are wrapped)
      $('.headWrap').contents().unwrap();

      if ($heading.parent('.headWrap').length) {
        // unwrap this one if second click - (remove if not desired behavior)
        $heading.unwrap()
      } else {
          // or wrap this one
          $heading.wrap($('<div/>', { class: 'headWrap' }));
      }    
  });
});

.headWrap {
  background-color: red;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Heading Test content 1
</h1>
<h2>
Heading Test content 2
</h2>
<h3>
Heading Test content 3
</h3>

Answer 4

只需从元素中删除headWrap类，然后再将其添加到单击的元素中：

$('.headWrap').removeClass('headWrap');

另外，还有另外一个原因要将它们包装在div中吗？没有理由这样做。

Fiddle

从整个`h1 - h6`标签中删除包装器`div`并仅包装当前的标签

4 个答案: