2017-03-02 7 views
2
<a href="/user/SOMEUSERNAME">SOMEUSERNAME</a> 
<div class="col s9"> 
    <p id="p_50">Some message</p> 
    <br> 
    <br> 
    <span class="forumtools"> 
    <strong> 
     <a onclick="quote(\'p#p_50\')">Quote</a> 
    </strong> 
    <span class="right">Written SOMEDATE</span> 
    </span> 
</div> 

JQuery/JS:Finden Sie vorherige <a> Element?

function quote(post) { $(post).text(); } 

Dies funktioniert die Beiträge Nachricht holen, aber wie gehe ich über den Benutzernamen zu finden?

Ich habe versucht mit $(post).prev('a').text(); und $(post).parent().prev('a').text();, aber nichts scheint zu funktionieren.

+0

Sie können https: //api.jquery .com/prev/um das vorherige Element zu erhalten. – Oddadmix

+0

Für Ihr Problem können Sie einen Daten-Benutzernamen auf dem Element mit dem Benutzernamen hinzufügen. – Oddadmix

+0

@Oddadmix OP geschrieben, dass sie das versucht haben und es nicht funktioniert –

Antwort

1

Sie können es ohne jQuery tun. Wenn möglich, die HTML ändern und die aktuelle Link auf die Funktion übergeben, wie folgt aus:

<a onclick="quote(\'p#p_50\', this)">Quote</a> 

Dann können Sie einfach durch alle Links suchen:

function quote(str, currentLink) { 
    var allLinks = document.getElementsByTagName("a"); // get all links in document 
    var index = allLinks.indexOf(currentLink); 
    if (index > 0) { 
    var prevLink = allLinks[index-1]; 
    console.log(prevLink); // log it to browser console 
    } else { 
    console.log("there is no previous link"); 
    } 
} 
0

Mit Blick auf die DOM-Struktur sollte es mit $(post).parent().prev().text() arbeiten.

Alternative Art und Weise, wie über Sie alle mit <div> wickeln, wie folgt aus: XD

<div id="message1"> 
<a href="/user/SOMEUSERNAME">SOMEUSERNAME</a> 
<div class="col s9"> 
    <p id="p_50">Some message</p> 
    <br> 
    <br> 
    <span class="forumtools"> 
    <strong> 
     <a onclick="quote(\'#message1\')">Quote</a> //change to wrapper id 
    </strong> 
    <span class="right">Written SOMEDATE</span> 
    </span> 
</div> 
</div> 

dann die Post Text zu erhalten: $(post).find('#p_50').text();

den Benutzernamen zu erhalten: $(post).find('a:first').text();

+1

Nur sicher sein, dem OP zu sagen, dass eine Abfrage wie' $ (post) .parent(). Prev(). Text(). 'Sehr spröde ist und das OP sollte Strukturieren Sie den HTML-Code besser, anstatt Code zu schreiben, der sich mit einer geringfügigen Änderung im HTML-Code ändert. –

0

Schauen Sie sich Ihren Beispiel-HTML an, wenn Sie sich bei befinden, gehen Sie einfach zum übergeordneten Element und holen Sie sich den nächsten a und Sie sollten in Ordnung sein:

function quote(post) { 
    var post = $(post).text(); 
    var user = $(post).parent().closest('a').text(); 
} 
0

vielleicht mit parent() und dann Zurück (

) unterhalb
var ancortext = $(post).parent().prev().text(); 

Ein Funktionsbeispiel.

Hinweis: Das riecht mir, Ihr Code ist auf diese Weise sehr stark in die Struktur des HTML eingebunden. Wenn Sie den HTML-Code ändern, wird Ihr JavaScript wahrscheinlich kaputt gehen.

Ich habe Ihren Code in mein eigenes HTML-Dokument kopiert und bestätigt, dass die jquery-Methode oben das gewünschte Ergebnis ausgibt. Wenn Sie nicht sind, dann ist etwas anders mit Ihrem Quell-HTML und der Quelle, die Sie gepostet haben, oder Ihre jquery Funktionen unterscheiden sich von denen in dieser Antwort :)

+0

Das liegt daran, dass deine JS-Geige falsch lag. https://jsfiddle.net/wrco905a/10/ –

0

Ihr onclick Attribut ist falsch, weil onclick Javascript akzeptieren, so der Wert könnte Unterstützung js sein, dann onclick = "quote('p#p50')".

function quote(post) { 
 
     var subject = $(post).text(); 
 
     var user=$(post).parent().prev('a').text(); 
 
     console.log('posted '+subject+' by '+user); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="/user/SOMEUSERNAME">SOMEUSERNAME</a> 
 
<div class="col s9"> 
 
    <p id="p_50">Some message</p> 
 
    <br> 
 
    <br> 
 
    <span class="forumtools"> 
 
    <strong> 
 
     <a onclick="quote('p#p_50')">Quote</a> 
 
    </strong> 
 
    <span class="right">Written SOMEDATE</span> 
 
    </span> 
 
</div>