文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery replaceWith删除内容。

问Jquery replaceWith删除内容。
EN

Stack Overflow用户

提问于 2015-02-06 13:56:01

回答 6查看 584关注 0票数 1

在移动和平板电脑上，我需要用一个<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>

javascript

jquery

html

css

回答 6

Stack Overflow用户

回答已采纳

发布于 2015-02-06 14:01:25

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

你可以这样做：

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

票数 2

Stack Overflow用户

发布于 2015-02-06 14:00:12

来自JQuery docs on replaceWith()

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

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

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>

票数 2

Stack Overflow用户

发布于 2015-02-06 14:01:28

您不会保留原始span的文本或其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/

或者，如果使用pref，则使用函数参数进行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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28367354

复制

相似问题

问Jquery replaceWith删除内容。
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery replaceWith删除内容。EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery replaceWith删除内容。
EN