Javascript Jquery-从最近的元素复制文本

我有下面的代码

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

我也尝试了下面的代码，但这似乎不起作用。 $（'div.copied-text'）.html（$（this）.parent（）.sibbins（）.children（'h6'）.children（'a'）.text（））

如果有帮助的话，我已经在JSFIDLE中设置了它 这是一个工作示例，但是在我的项目中，一个页面上有许多div.container元素，因此需要解决方案来适应每个容器

---

非常感谢您的帮助：）

使用

.container

作为您的家长：

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

不使用

的更简单或替代版本。每个
将：

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

工作片段


$（文档）.ready（函数（）{
$（“.container”）.each（函数（）{
$this=$（this）；
$this.find（“.copied text”）.html（$this.find（“h6 a”）.text（））；
});
});
.container{
边框：1px纯蓝色；
高度：200px；
边缘底部：10px；
宽度：200px；
}
标题{
背景色：红色；
}
部分{
背景颜色：黄色；
}
.复制的文本{
背景色：青色；
最小高度：30px；
宽度：100%；
}

空格填充文字等等等等等等等等等等等等

文本A的空格
文本A
空格填充文字等等等等等等等等等等等等

文本B的空格
文本B
将
.container
用作父容器：

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

不使用
的更简单或替代版本。每个
将：

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

工作片段


$（文档）.ready（函数（）{
$（“.container”）.each（函数（）{
$this=$（this）；
$this.find（“.copied text”）.html（$this.find（“h6 a”）.text（））；
});
});
.container{
边框：1px纯蓝色；
高度：200px；
边缘底部：10px；
宽度：200px；
}
标题{
背景色：红色；
}
部分{
背景颜色：黄色；
}
.复制的文本{
背景色：青色；
最小高度：30px；
宽度：100%；
}

空格填充文字等等等等等等等等等等等等

文本A的空格
文本A
空格填充文字等等等等等等等等等等等等

文本B的空格
文本B
使用，以便可以迭代到每个匹配的元素：

$('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
});

使用，以便可以迭代到每个匹配的元素：

$('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
});

我在我的一个项目中开发了一个解决方案，找到了最接近鼠标位置的元素

1） 使用了最近的插件-

2） 视口插件用于-

3） 调用函数是：

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();

    }

其中，
$element
是您选择的元素，
eventData
是jquery事件对象

您可以调用如下函数：

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

希望这有帮助

享受：）
我在我的一个项目中开发了一个最接近鼠标位置元素的解决方案

1） 使用了最近的插件-

2） 视口插件用于-

3） 调用函数是：

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();

    }

其中，
$element
是您选择的元素，
eventData
是jquery事件对象

您可以调用如下函数：

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

希望这有帮助

享受：）