Question

这是我的HTML代码。我必须在点击链接时选择active（不是链接）并将active转换为<a>标记。

<div class="archiveDelete">
<div class="">
active&nbsp;|&nbsp;
<a href="javascript:void(0)"> archived</a> &nbsp;|&nbsp;
    <a href="javascript:void(0)"> deleted</a>
</div>

这是我的Fiddle。

如何选择文本“有效”但不选择链接？我尝试使用$('.archiveDelete').text()，但它包含active|archived|deleted。

我正在尝试的是，我要将点击的链接转换为文本和其他文本到链接。提前致谢

Answer 1

请检查以下小提琴，以获得答案：

http://jsfiddle.net/JLQ5r/7/

更改了HTML：

<div class="archiveDelete">
<!-- The links at the bottom right side of the table-->
<div class="">
    <span class="spanclass">active</span>&nbsp;|&nbsp;
    <a href="javascript:void(0)" class="links"><span class="spanclass">archived</span></a>&nbsp;|&nbsp;<a href="javascript:void(0)" class="links"><span class="spanclass">deleted</span></a>
</div>
 </div>

更改了Jquery：

$( document ).ready(function() {
    $(document).on('click', '.archiveDelete a', function() {
        var thistext = $(this).text();
        //$(this).replaceWith("<span class='spanclass'>"+$(this).text()+"</span>");
        $(this).contents().unwrap();
        alert(thistext);
        $( ".spanclass" ).each(function() {
            var spantext = $(this).text();
            //alert(spantext);
            //alert($(this).parent('a').length);
            if(thistext!=spantext && $(this).parent('a').length == 0) {
                $(this).wrap( "<a href='javascript:void(0)' class='links'></a>" );
            }
        });

    });
});

点击锚点后，它将变为简单文本，休息将成为锚点。

请检查并恢复任何疑问。

Answer 2

如果你想将锚标签转换为文本，你可以做一些像这样的事情

检查小提琴

http://jsfiddle.net/Q4Ufx/18/

$('.archiveDelete a').click(function(){
    //alert($(this).text());
    var all=$(this).contents().unwrap();
     alert(all);
  });

Answer 3

如果您真的必须这样做，要将active转换为锚点，您可以使用html()和replace()方法：

$(this.parentNode).html(function(_, oldHTML){
    return oldHTML.replace(/(active)/, "<a href='#'>active</a>");
});

将锚转换为textNode：

$(this.parentNode).find('a:contains(active)') // or .find('a')
                  .replaceWith(function() { 
                       return this.textContent || this.innerText;
                  });

您也可以使用另一个元素而不是使用textNode，然后您可以使用replaceWith方法将该元素替换为另一个元素。另一个选项是添加/删除类，然后在您的单击处理程序中，您可以检查该元素是否具有某个className，如果是，执行此操作，否则不执行任何操作。

更新

如果要将单击的元素转换为textNode：

$(this).replaceWith(function() { 
    return this.textContent || this.innerText;
});

请注意，由于您要动态生成a元素，因此您还应该委派事件：

$('.archiveDelete').on('click', 'a', function(){
  // ...
});

Answer 4

尝试以下脚本 -

var $element = $('.archiveDelete');
$element.clone().children().remove().end().text();

Answer 5

只需执行$(this).text()，它就会显示您点击的链接。

编辑代码：

  $('.archiveDelete a').click(function(){
    //alert($(this).text());
    var all=$(this).text();
    alert(all);
  });

http://jsfiddle.net/Q4Ufx/9/

获取链接的href：

http://jsfiddle.net/Q4Ufx/17/

  $('.archiveDelete a').click(function(){
    var all=$(this).attr('href'); //to get HREF
    alert(all);
  });

要显示active，请看这个小提琴：

http://jsfiddle.net/Q4Ufx/19/

Answer 6

试试这个

$('.archiveDelete a').click(function(){
    alert($(this).text());
  });

DEMO

Answer 7

尝试这一点，我已将班级（acrhieveDelete）转移到下一个div。

  <div class="">
    <div class="archiveDelete">
    active | 
    <a href="javascript:void(0)">archived</a>&nbsp;|&nbsp;<a href="javascript:void(0)">deleted</a>
    </div>
  </div>

  $('.archiveDelete a').click(function(){
    var all=$('.archiveDelete').contents();
     var str = all.first().text().replace('|','');
      all.first().replaceWith( "<a href='javascript:void(0)'>"+str+"</a> | " );

  });

JQuery选择div文本

7 个答案: