如何根据类获取父div内的元素？

我想下面Text to grab抢：如何根据类获取父div内的元素？

<div class="article-box">      
    <div> 
     <a href="/someurl" class="article-text">Text to grab</a> 
    </div> 
    <br> 
    <div> 
     <a href="/anotherurl" class="q-author">The author</a> 
    </div> 
    <br> 
    <ul class="share-buttons pull-left"> 
     <li> 
      <a href="#" class="tw-share">Share on facebook</a> 
     </li> 
     <li> 
      <a href="#" class="tw-share">Tweet it</a> 
     </li> 
    </ul> 
</div> 
<div class="article-box"> 
    //similar to above 
</div>

我jQuery是：

jQuery(document).ready(function() { 
    jQuery(".tw-share").click(function() { 
     var article = $(this).parent(".article-text"); //<--Here is the Problem 
     console.log('article is: ', article); 
     var aurl= window.location.href; 
     window.location='https://twitter.com/intent/tweet?text=' + article + '&url='+aurl; 

    }); 
});

但它失败。我该如何解决它？

来源

2016-12-05 graco

这是**值得**你的时间到通读[jQuery的API（http://api.jquery.com）开始到结尾。它只需要一两个小时，并立即支付你*立即*。 –

你的问题是，.tw-share不是.article文本的孩子。这是一个兄弟姐妹的孩子。要解决此问题，您可以使用closest()获取包含.article-box，然后find()。

我也强烈建议您对要放置在网址中的文本致电encodeURIComponent()，以确保其编码正确，并且不会推断您要添加的网址。试试这个：

jQuery(function($) { 
 
    jQuery(".tw-share").click(function() { 
 
    var $article = $(this).closest('.article-box').find(".article-text"); 
 
    var articleText = encodeURIComponent($article.text()); 
 
    var aurl = encodeURIComponent(window.location.href);  
 
    var url = 'https://twitter.com/intent/tweet?text=' + articleText + '&url=' + aurl; 
 
    
 
    console.log('article is: ', articleText); 
 
    console.log(url); 
 
    
 
    //window.location = url; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="article-box"> 
 
    <div> 
 
    <a href="/someurl" class="article-text">Text to grab</a> 
 
    </div><br> 
 
    <div> 
 
    <a href="/anotherurl" class="q-author">The author</a> 
 
    </div><br> 
 
    <ul class="share-buttons pull-left"> 
 
    <li><a href="#" class="tw-share">Share on facebook</a></li> 
 
    <li><a href="#" class="tw-share">Tweet it</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="article-box"> 
 
    <div> 
 
    <a href="/someurl" class="article-text">Text to grab #2</a> 
 
    </div><br> 
 
    <div> 
 
    <a href="/anotherurl" class="q-author">The author #2</a> 
 
    </div><br> 
 
    <ul class="share-buttons pull-left"> 
 
    <li><a href="#" class="tw-share">Share on facebook #2</a></li> 
 
    <li><a href="#" class="tw-share">Tweet it #2</a></li> 
 
    </ul> 
 
</div>

来源

2016-12-05 08:07:43

jQuery(document).ready(function() { 
    jQuery(".tw-share").click(function() { 
     var article = $(this).parents(".article-box").find('.article-text'); 

     console.log('article is: ', article); 
     var aurl= window.location.href; 
     window.location='https://twitter.com/intent/tweet?text=' + article + '&url='+aurl; 

    }); 
});

来源

2016-12-05 08:07:00 ixpl0

需要向上遍历使用.closest()然后使用.find()靶向article-text元件共同的父元素即article-box。需要使用另外.text()来获取元素的文本。

var article = $(this).closest('.article-box').find(".article-text").text();

来源

2016-12-05 08:07:14 Satpal

如何根据类获取父div内的元素？

回答

相关问题