如果包装器包含特定元素，则替换HTML标签

Question

如果在字段集中没有<fieldset>，我想将<div>替换为input。我正在朝这个方向前进，但在完成该任务时遇到了困难。

(function ($) {
    const selector = {
        fieldsetWrapper: '.fieldsetWrapperClass',
        radioWrapper: '.class-for-radio-input'
    };

    class FieldsetReplace {
        constructor(element) {
            this.$fieldsetWrapper = $(element);
            this.$fieldsetWrapper= this.$fieldsetWrapper.find(selector.fieldset);
            this.replaceFieldset();
        }

        replaceFieldset() {
           if (!this.fieldsetWrapper.has("input")) {
                $('fieldset', this).replaceWith(function(){
                    return $("<div />").append($(this).contents());
                });
            }
        }
   }

Answer 1

在您提供的代码中，带有$('fieldset', this)的行将您的FieldsetReplace实例传递给jQuery，并且不知道该怎么做。您似乎还缺少一个selector.fieldset值，但我认为这可能只是您的代码段中的错字。

我已将您的代码简化为以下代码段中与您的问题特别相关的部分。似乎您在理解JavaScript中的this关键字时花了点时间。在jQuery方法中，this通常表示jQuery对象中的单个元素。但是，除此之外，它的运作方式大不相同。

有关this的更多信息，请随时发表评论或查看MDN的文档https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

const replaceFieldsetsWithoutInput = function (elementOrSelector) {
    const $fieldsets = $(elementOrSelector).find('fieldset:not(:has(input))')
    $fieldsets.replaceWith(function() {
    	return $('<div />').append($(this).contents())
    })
}

replaceFieldsetsWithoutInput('.js-fieldset-wrapper')

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

<div class="js-fieldset-wrapper">

  <!-- Unaffected - has an input -->
  <fieldset>
    <input value="test 1" />
  </fieldset>

  <!-- Should be replaced with a <div> -->
  <fieldset>Test 2</fieldset>

  <!-- Should also be replaced with a <div>, different contents -->
  <fieldset>Test 3</fieldset>

</div>

Answer 2

DOM方法和属性

以下演示使用以下内容：

  

  

• .querySelector() 和 .querySelectorAll()

  

• .forEach()

  

• .contains()

  

• .parentNode

  

• .createElement()

  

• .insertAdjacentElement()

  

• Array.from()

  

• .children

  

• for...of

  

• .appendChild()

  

• .removeChild()

  

---

演示

演示中评论的详细信息

// Collect all <fieldset>s into a NodeList
var sets = document.querySelectorAll('fieldset');

// For each <fieldset>...
/* 
if a <fieldset> does NOT have an <input>...
get <fieldset>'s parent...
create a <div> and...
insert <div> before <fieldset>.
Get the children tags of <fieldset> and into an array and...
iterate the children tags of <fieldset> then...
append the tags to the <div>.
Remove <fieldset>
*/
sets.forEach((set) => {
  if (!set.contains(set.querySelector('input'))) {
    var parent = set.parentNode;
    var div = document.createElement('div');
    set.insertAdjacentElement('beforebegin', div);
    var content = Array.from(set.children);
    for (tag of content) {
      div.appendChild(tag);
    }
    parent.removeChild(set);
  }
});

div {
  border: 1px dashed red;
}

<fieldset>
  <input>
</fieldset>

<fieldset>
  <div>Content</div>
</fieldset>

<fieldset>
  <input>
</fieldset>

<fieldset>
  <input>
</fieldset>

<fieldset>
  <div>Content</div>
</fieldset>