Linkliste exclude Klassen

kosovafan

kosovafan

Erfahrenes Mitglied
Hallo,

ich beziehe mich auf diesen Post. Es werden über Javascript Links und Images in separate Listen gepackt was soweit gut funktioniert. Jetzt stelle ich mir die Frage wie man bestimmte div Elemente innerhalb von <article> ausschließen kann? Ich hatte das mit der .not Function probiert, funktioniert aber nicht.

Javascript: 
$("article a").not(".twitter-tweet").each(function (idx, ele) {
    var newele = $(ele).clone();
    newele.text($(ele).prop("title"));
    $("aside div.article__source").append(newele);
});

Die Funktionen youtube und tweet von Hugo sollten aus der Liste herausgenommen werden. Youtube befindet sich in den <div id="player">, der Tweet wird <twitter-widget class="twitter-tweet twitter-tweet-rendered></twitter-widget> so ummantelt.

Vielen Dank für Eure Hilfe.

Silvio
 
Sempervivum

Sempervivum

Erfahrenes Mitglied
Der Javascriptcode setzt voraus, dass das a-Element die Klasse "twitter-tweet" hat, bei deinem HTML ist es jedoch ein twitter-widget-Element. Man müsste das vollständige HTML sehen, um zu zeigen, wie der Code aussehen muss.
 
kosovafan

kosovafan

Erfahrenes Mitglied
Hallo,

das ist was ich über den Inspektor heraus ziehen konnte. <twitter-widget> ist Start und Ende. Der Rest ist laut Inspektor in ein #shadow-root verpackt. Ich hatte ein wenig mit not probiert aber irgendwie läuft das nicht. Ich hatte gedacht einfach die Links in aside heraus zu löschen, ist aber shit weil ich die tweet Funktion von gohugo.io nicht immer nutze.

HTML: 
<twitter-widget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-0" style="position: static; visibility: visible; display: block; transform: rotate(0deg); max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;" data-tweet-id="671685032675844098">

    <div data-twitter-event-id="0" class="SandboxRoot env-bp-350" style="position: relative;"><div class="EmbeddedTweet EmbeddedTweet--cta js-clickToOpenTarget" data-click-to-open-target="https://twitter.com/ndaktuell/status/671685032675844098" data-iframe-title="Twitter Tweet" data-scribe="page:tweet" id="twitter-widget-0" lang="en" data-twitter-event-id="1">

    <div class="EmbeddedTweet-tweetContainer">
      <div class="EmbeddedTweet-tweet">
    <blockquote class="Tweet h-entry js-tweetIdInfo subject expanded" cite="https://twitter.com/ndaktuell/status/671685032675844098" data-tweet-id="671685032675844098" data-scribe="section:subject">
    <div class="Tweet-header">
      <a class="TweetAuthor-avatar  Identity-avatar u-linkBlend" data-scribe="element:user_link" href="https://twitter.com/ndaktuell" aria-label="neues deutschland (screen name: ndaktuell)"><img class="Avatar" data-scribe="element:avatar" data-src-2x="https://pbs.twimg.com/profile_images/1053297413908320256/Wyh3Xoaj_bigger.jpg" alt="" data-src-1x="https://pbs.twimg.com/profile_images/1053297413908320256/Wyh3Xoaj_normal.jpg" src="https://pbs.twimg.com/profile_images/1053297413908320256/Wyh3Xoaj_normal.jpg"></a>

      


<div class="TweetAuthor js-inViewportScribingTarget" data-scribe="component:author">
  <a class="TweetAuthor-link Identity u-linkBlend" data-scribe="element:user_link" href="https://twitter.com/ndaktuell" aria-label="neues deutschland (screen name: ndaktuell)">
    <div class="TweetAuthor-nameScreenNameContainer">
      <span class="TweetAuthor-decoratedName">
        <span class="TweetAuthor-name Identity-name customisable-highlight" title="neues deutschland" data-scribe="element:name">neues deutschland</span>
        <span class="TweetAuthor-verifiedBadge" data-scribe="element:verified_badge"><div class="Icon Icon--verified " aria-label="Verified Account" title="Verified Account" role="img"></div>
<b class="u-hiddenVisually">✔</b></span>
      </span>
      <span class="TweetAuthor-screenName Identity-screenName" title="@ndaktuell" data-scribe="element:screen_name" dir="ltr">@ndaktuell</span>
    </div>
  </a>
</div>

        <div class="Tweet-brand">
          <a href="https://twitter.com/ndaktuell/status/671685032675844098" data-scribe="element:logo"><span class="FollowButton-bird"><div class="Icon Icon--twitter " aria-label="View on Twitter" title="View on Twitter" role="presentation"></div>
</span></a>
        </div>
    </div>
    <div class="Tweet-body e-entry-content" data-scribe="component:tweet">
      
      <div class="Tweet-target js-inViewportScribingTarget"></div>
      <p class="Tweet-text e-entry-title" lang="de" dir="ltr">Alltag in <a href="https://twitter.com/hashtag/Kaltland?src=hash" data-query-source="hashtag_click" class="PrettyLink hashtag customisable" dir="ltr" rel="tag" data-scribe="element:hashtag"><span class="PrettyLink-prefix">#</span><span class="PrettyLink-value">Kaltland</span></a>: Eine Übersicht zu <a href="https://twitter.com/hashtag/Neonazi?src=hash" data-query-source="hashtag_click" class="PrettyLink hashtag customisable" dir="ltr" rel="tag" data-scribe="element:hashtag"><span class="PrettyLink-prefix">#</span><span class="PrettyLink-value">Neonazi</span></a>-Attacken auf Parteibüros seit 2010 </p>




          <div class="Tweet-card">
  
<article class="MediaCard
           
           customisable-border" data-scribe="component:card" dir="ltr">
  <div class="MediaCard-media" data-scribe="element:photo">

    <div class="MediaCard-widthConstraint js-cspForcedStyle" style="max-width: 800px" data-style="max-width: 800px">
      <div class="MediaCard-mediaContainer js-cspForcedStyle MediaCard--roundedTop MediaCard--roundedBottom" style="padding-bottom: 100.0000%" data-style="padding-bottom: 100.0000%">
        <a href="https://twitter.com/ndaktuell/status/671685032675844098/photo/1" class="MediaCard-mediaAsset NaturalImage">
          <img class="NaturalImage-image" data-image="https://pbs.twimg.com/media/CVJN-j4XAAES1gy" data-image-format="jpg" width="800" height="915" title="View image on Twitter" alt="View image on Twitter" src="https://pbs.twimg.com/media/CVJN-j4XAAES1gy?format=jpg&amp;name=small">
        </a>
      </div>
    </div>
  </div>
</article>

  
  
    
    
    
</div>

      <div class="TweetInfo">
        <div class="TweetInfo-like">
<a class="TweetInfo-heart" title="Like" href="https://twitter.com/intent/like?tweet_id=671685032675844098" data-scribe="component:actions">
  <div data-scribe="element:heart"><div class="Icon Icon--heart " aria-label="Like" title="Like" role="img"></div>
</div>
  <span class="TweetInfo-heartStat" data-scribe="element:heart_count">21</span>
</a>
</div>
        <div class="TweetInfo-timeGeo">

<a class="u-linkBlend u-url customisable-highlight long-permalink" data-datetime="2015-12-01T13:39:25+0000" data-scribe="element:full_timestamp" href="https://twitter.com/ndaktuell/status/671685032675844098">








<time class="dt-updated" datetime="2015-12-01T13:39:25+0000" pubdate="" title="Time posted: December 01, 2015 13:39:25 (UTC)">3:39 PM - Dec 1, 2015</time></a> · 
<a class="u-linkBlend customisable-highlight" href="https://twitter.com/search?q=place%3A3078869807f9dd36">Berlin, Germany</a></div>
        <div class="tweet-InformationCircle" data-scribe="element:notice"><a href="https://support.twitter.com/articles/20175256" class="Icon Icon--informationCircleWhite js-inViewportScribingTarget" title="Twitter Ads info and privacy"><span class="u-hiddenVisually">Twitter Ads info and privacy</span></a>
</div>
      </div>
    </div>
  </blockquote>
</div>
  
  <a class="CallToAction" title="View the conversation on Twitter" href="https://twitter.com/ndaktuell/status/671685032675844098" data-scribe="section:cta component:news">
    <div class="CallToAction-icon" data-scribe="element:conversation_icon"><div class="Icon Icon--replyCTA " aria-label="View conversation on Twitter" title="View conversation on Twitter" role="img"></div>
</div>
    <div class="CallToAction-text" data-scribe="element:conversation_text">60 people are talking about this</div>
    <div class="CallToAction-chevron" data-scribe="element:cta_chevron"><div class="Icon Icon--chevronRightCTA " aria-label="View on Twitter" title="View on Twitter" role="img"></div>
</div>
  </a>

</div>

  </div><div class="resize-sensor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; z-index: -1; visibility: hidden;"><div class="resize-sensor-expand" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;"><div style="position: absolute; left: 0px; top: 0px; transition: all 0s ease 0s; width: 510px; height: 674px;"></div></div><div class="resize-sensor-shrink" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;"><div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%"></div></div></div></div>
  <style type="text/css">@import url("https://platform.twitter.com/css/tweet.9bf5093a19cec463852b31b784bf047a.light.ltr.css");</style>
  </twitter-widget>


MFG & Dank
Silvio
 
Sempervivum

Sempervivum

Erfahrenes Mitglied
Ich schlage vor, es so zu lösen: Prüfen, ob das a-Element ein Kind eines Twitter-Widgets ist, wenn ja, den Link ingnorieren:
Code: 
    <twitter-widget>
    <!-- Inhalt wie oben gepostet -->
    </twitter-widget>
    <article>
        <a href="wikipedia.org" title="Wikipedia">Wikipedia</a>
        <a href="tutorials.de" title="tutorials.de">tutorials.de</a>
    </article>
    <aside>
        <div class="article__source">
        </div>
    </aside>
    <script>
        var twitterWidgets = $("twitter-widget");
        $("article a").each(function (idx, ele) {
            if (twitterWidgets.find(ele).length == 0) {
                var newele = $(ele).clone();
                newele.text($(ele).prop("title"));
                $("aside div.article__source").append(newele);
            }
        });
    </script>
 
kosovafan

kosovafan

Erfahrenes Mitglied
Hallo,

ich habe darauf kein Einfluss, ist ein Builtin von Hugo. Gibt es nicht eine Möglichkeit durch Jquery die Links von twitter.com und t.co einfach wieder auszublenden wie hier?

Mfg & Dank
Silvio
 
Sempervivum

Sempervivum

Erfahrenes Mitglied
Das tut doch mein Code, er ignoriert die Links, die innerhalb des Twitter-Widgets liegen. Das Widget selber brauchst Du nicht anzufassen. Dies:
Code: 
    <article>
        <a href="wikipedia.org" title="Wikipedia">Wikipedia</a>
        <a href="tutorials.de" title="tutorials.de">tutorials.de</a>
    </article>
habe ich nur zu Testzwecken eingefügt, um sicherzugehen, dass die anderen Links richtig berücksichtigt werden.
 
kosovafan

kosovafan

Erfahrenes Mitglied
Hallo,

irgendwie hat das nicht funktioniert, scheint auch echt schräg zu sein dieses Widget. Ich habe das jetzt durch eine Recherche im Netz zumindest als erfolgreich gelöst. Eventuell schaust noch mal drüber ob es richtig ist. Die Links sind aus der Liste verschwunden.

Javascript: 
    $('article a').each(function (idx, ele) {
        var newele = $(ele).clone();
        newele.text($(ele).prop("title"));
        $('aside div.article__source').append(newele);

        if($('.article__source a[href*="twitter"]').length > 0){
          $('.article__source a[href*="twitter"]').hide();
        }

        if($('.article__source a[href*="t.co"]').length > 0){
          $('.article__source a[href*="t.co"]').hide();
        }

    });


MFG & Danke
Silvio
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge