JQuery - Kopieren von Text aus nächstgelegenen Elemente

Question

ich den Code habe unter

<div class="container"> 
    <header> 
    <p>Space filler text blah blah blah blah blah blah blah blah blah</p> 
    <div class="copied-text"> 
     Space for text A 
    </div> 
    </header> 

    <section> 
    <h6> 
     <a>Text A</a> 
    </h6> 
    </section> 
</div> 

<div class="container"> 
    <header> 
    <p>Space filler text blah blah blah blah blah blah blah blah blah</p> 
    <div class="copied-text"> 
     Space for text B 
    </div> 
    </header> 

    <section> 
    <h6> 
     <a>Text B</a> 
    </h6> 
    </section> 
</div> 

Was ich versuche, den Text in dem einem Tag auf das div.copied-Textelement zu tun ist, kopieren, aber das ich nur wollen um den für diesen spezifischen Container eindeutigen Text zu kopieren.

Ich habe den Code unten versucht, aber diese Kopien beiden Sätze von Text auf beide divs

$('div.copied-text').html($('h6 a').text()); 

Ich habe auch versucht, den Code unten, aber das scheint nicht zu funktionieren. $ ('div.copied-text') .html ($ (this) .parent(). Geschwister(). Children ('h6'). Children ('a'). Text());

ich es in jsFiddle eingerichtet habe, wenn es https://jsfiddle.net/jy5fghd8/3/ hilft Dies ist ein funktionierendes Beispiel, aber in meinem Projekt habe ich viele div.container Elemente auf einer Seite so die Lösung muß jeden Behälter anzupassen.

Vielen Dank für jede Hilfe :)

Answer 1

die .container als Eltern verwenden:

$(document).ready(function() { 
    $(".container").each(function() { 
    $this = $(this); 
    $this.find(".copied-text").html($this.find("h6 a").text()); 
    }); 
}); 

Die einfachere oder alternative Version ohne .each verwendet wird:

$(function() { 
    $(".copied-text").html(function() { 
    return $(this).closest(".container").find("h6 a").text(); 
    }); 
}); 

Arbeits Snippet

$(document).ready(function() { 
 
    $(".container").each(function() { 
 
    $this = $(this); 
 
    $this.find(".copied-text").html($this.find("h6 a").text()); 
 
    }); 
 
});

.container { 
 
    border: 1px solid blue; 
 
    height: 200px; 
 
    margin-bottom: 10px; 
 
    width: 200px; 
 
} 
 
header { 
 
    background-color: red; 
 
} 
 
section { 
 
    background-color: yellow; 
 
} 
 
.copied-text { 
 
    background-color: cyan; 
 
    min-height: 30px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <header> 
 
    <p>Space filler text blah blah blah blah blah blah blah blah blah</p> 
 
    <div class="copied-text"> 
 
     Space for text A 
 
    </div> 
 
    </header> 
 

 
    <section> 
 
    <h6> 
 
     <a>Text A</a> 
 
    </h6> 
 
    </section> 
 
</div> 
 

 
<div class="container"> 
 
    <header> 
 
    <p>Space filler text blah blah blah blah blah blah blah blah blah</p> 
 
    <div class="copied-text"> 
 
     Space for text B 
 
    </div> 
 
    </header> 
 

 
    <section> 
 
    <h6> 
 
     <a>Text B</a> 
 
    </h6> 
 
    </section> 
 
</div>

Answer 2

Verwenden html function, so dass Sie zu jedem abgestimmte Elemente laufen können:

$('div.copied-text').html(function(_,txt){ 
//set the text for each .copied-text 
    txt = $(this).parents('header') //find closest header 
     .next() //next section element from header 
     .find('a').text(); //find the link text 
}); 

Answer 3

I-Lösung in einem meine Projekten entwickelt, die am nächsten an der Mausposition Element gefunden.

1) Der nächste Plugin verwendet wurde - http://gilmoreorless.github.io/jquery-nearest/

2) Die Ansichtsfenster-Plugin verwendet wurde - http://www.appelsiini.net/projects/viewport

3) Die Anruffunktion ist:

getNearestElementInView: function($element, eventData) { 
     $element = $.nearest({ 
      x: eventData.pageX || 0, 
      y: eventData.pageY || 0, 
      sort: 'nearest',    

     }, $element.selector); 

     return $element.filter(function() { 
      return $.inviewport(this, { threshold: 0 }); 
     }).first(); 

    } 

wo $element Ihre gewählten Elemente und eventData ist jquery-Ereignisobjekt.

können Sie rufen Funktion wie:

$(your_element_selector).on('mouseenter',function(ev){ 
getNearestElementInView($(this),ev); 
}); 

Hoffnung, das hilft.

Enjoy :)