Jquery replaceWith 删除内容

Question

在手机和平板电脑上，我需要用 select/option 标签替换 <span>content</span>。

我不确定为什么这不起作用，因为选项会删除其中的内容。

关于如何让这个 select 选项标签环绕我的跨度有什么想法吗？

var $window = $(window);
 var windowsize = $window.width();

  function wrapContent(){
    if (windowsize < 800) {
      $('.pick-country > span').each(function () {
        $(this).replaceWith('<option></option>');
      });
      $('.pick-country > option').wrapAll('<select class="country-list"></select>');

    }
  }
  wrapContent();
  $(window).resize(wrapContent);

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

<div class="pick-country"> 
<div class="country">PICK A COUNTRY</div>

<span id="London" class="London hotspot">London</span>
<span id="CapeTown" class="CapeTown hotspot">Cape Town</span>
<span id="Beijing" class="Beijing hotspot">Beijing</span>
<span id="Tokyo" class="Tokyo hotspot">Tokyo</span>
<span id="HongKong" class="HongKong hotspot">Hong Kong</span>
<span id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span>
<span id="Singapore" class="Singapore hotspot">Singapore</span>
<span id="Mumbai" class="Mumbai hotspot">Mumbai</span>
<span id="Shanghai" class="Shanghai hotspot">Shanghai</span>
<span id="Sydney" class="Sydney hotspot">Sydney</span>
<span id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span>
<span id="SanPaulo" class="SanPaulo hotspot">São Paulo</span>
<span id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span>
<span id="Dallas" class="Dallas hotspot">Dallas</span>
<span id="NewYork" class="NewYork hotspot">New York</span>
<span id="Dubai" class="Dubai hotspot">Dubai</span>



</div>

Answer 1

来自JQuery docs on replaceWith()：

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

因此，您必须在每次替换时手动添加内容：

var $window = $(window);
 var windowsize = $window.width();

  function wrapContent(){
    if (windowsize < 800) {
      $('.pick-country > span').each(function () {
        $(this).replaceWith('<option>'+ $(this).html() +'</option>');
      });
      $('.pick-country > option').wrapAll('<select class="country-list"></select>');

    }
  }
  wrapContent();
  $(window).resize(wrapContent);

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

<div class="pick-country"> 
<div class="country">PICK A COUNTRY</div>

<span id="London" class="London hotspot">London</span>
<span id="CapeTown" class="CapeTown hotspot">Cape Town</span>
<span id="Beijing" class="Beijing hotspot">Beijing</span>
<span id="Tokyo" class="Tokyo hotspot">Tokyo</span>
<span id="HongKong" class="HongKong hotspot">Hong Kong</span>
<span id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span>
<span id="Singapore" class="Singapore hotspot">Singapore</span>
<span id="Mumbai" class="Mumbai hotspot">Mumbai</span>
<span id="Shanghai" class="Shanghai hotspot">Shanghai</span>
<span id="Sydney" class="Sydney hotspot">Sydney</span>
<span id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span>
<span id="SanPaulo" class="SanPaulo hotspot">São Paulo</span>
<span id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span>
<span id="Dallas" class="Dallas hotspot">Dallas</span>
<span id="NewYork" class="NewYork hotspot">New York</span>
<span id="Dubai" class="Dubai hotspot">Dubai</span>



</div>

Answer 2

替换为替换整个内容，而不是标签。

你可以这样做：

$('.pick-country > span').each(function () {
    $(this).html("<option>" + $(this).html() + "</option");
});

它正在检索 span 对象中的所有 HTML 并在其周围插入选项。

我原来的 post 错误地使用 HTML 来解析并查找对象中的 span 实例，这是不正确的，因为 span 不会成为返回的 HTML 的一部分。

Answer 3

尝试这样的事情：

$('body').append('<select></select>');

$('.pick-country > span').each(function (elem) {
    $('select').append('<option>' + $(elem).text() + '</option>');
});

Answer 4

您正在用空白选项替换它们。

您可以执行以下操作：

$(this).replaceWith('<option id="' + $(this).attr('id') + '">' + $(this).text() +'</option>');

var $window = $(window);
 var windowsize = $window.width();

  function wrapContent(){
    if (windowsize < 800) {
      $('.pick-country > span').each(function () {
    $(this).replaceWith('<option id="' + $(this).attr('id') + '">' + $(this).text() +'</option>');
      });
      $('.pick-country > option').wrapAll('<select class="country-list"></select>');

    }
  }
  wrapContent();
  $(window).resize(wrapContent);

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

<div class="pick-country"> 
<div class="country">PICK A COUNTRY</div>

<span id="London" class="London hotspot">London</span>
<span id="CapeTown" class="CapeTown hotspot">Cape Town</span>
<span id="Beijing" class="Beijing hotspot">Beijing</span>
<span id="Tokyo" class="Tokyo hotspot">Tokyo</span>
<span id="HongKong" class="HongKong hotspot">Hong Kong</span>
<span id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span>
<span id="Singapore" class="Singapore hotspot">Singapore</span>
<span id="Mumbai" class="Mumbai hotspot">Mumbai</span>
<span id="Shanghai" class="Shanghai hotspot">Shanghai</span>
<span id="Sydney" class="Sydney hotspot">Sydney</span>
<span id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span>
<span id="SanPaulo" class="SanPaulo hotspot">São Paulo</span>
<span id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span>
<span id="Dallas" class="Dallas hotspot">Dallas</span>
<span id="NewYork" class="NewYork hotspot">New York</span>
<span id="Dubai" class="Dubai hotspot">Dubai</span>



</div>

Answer 5

您没有保留原始跨度的文本或其 ID 值。只需使用 text() 和 attr():

将它们添加到附加元素中

  $('.pick-country > span').each(function () {
        $(this).replaceWith($('<option/>').text($(this).text()).attr({'value': this.id, 'id': this.id});
  });

JSFiddle: http://jsfiddle.net/TrueBlueAussie/vyyw59c2/11/

或者，如果您喜欢，可以像这样使用 replaceWith() 的函数参数：

    $('.pick-country > span').replaceWith(function () {
        return $('<option/>').text($(this).text()).attr({'value': this.id, 'id': this.id});;
    });

JSFiddle: http://jsfiddle.net/TrueBlueAussie/vyyw59c2/10/

Answer 6

替换此行：

$(this).replaceWith('<option></option>');

有了这个：

$(this).replaceWith('<option>'+$(this).html()+'</option>');

编辑（带有 id 的选项）：

 $(this).replaceWith('<option id='+$(this).attr("id")+'>'+$(this).html()+'</option>');

Jquery replaceWith 删除内容

Jquery replaceWith deletes the content

html

javascript

css

jquery