Question

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

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

关于如何使这个选择标签环绕我的跨度的任何想法？

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()：

.replaceWith（）方法从DOM中删除内容，并通过一次调用在其位置插入新内容。

因此，您必须在替换的每次交互中手动添加内容：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

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

您可以执行以下操作：

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

您没有保留原始范围的文本或其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 4

替换此行：

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

用这个：

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

编辑（带有ID的选项）：

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

Answer 5

尝试这样的事情：

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

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

Answer 6

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

你可以这样做：

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

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

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

Jquery replaceWith删除内容

6 个答案: