JQuery選擇div文本

Question

這是我的HTML代碼。 單擊鏈接並將active轉換為<a>標簽時，我將選擇active （而不是鏈接）。

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

這是我的小提琴 。

如何選擇文本“活動”但不選擇鏈接？ 我試過使用$('.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> | " );

  });