从具有唯一 ID 的 DIV 中的 <a> 复制 href 并粘贴到 DIV 中的其他地方

Question

我正在尝试找到一种方法从 data-name="entity_field_post_title" div 复制 href，并将其用作 data-type="image" div[=17= 的 href ]

这样做的目的是打开相应的 link 页面，而不是打开它的照片。这些是 post 的缩影，我想打开 post 本身，而不是照片。

重要的是要指出顶部 div 的 ID 数字每次都会发生不可预测的变化。

<div id="drts-content-post-1163">
    <div class="drts-display-element-columns-3">
        <div class="drts-row drts-gutter-none">
            <div class="slick-list draggable">
                <div class="slick-track">
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/horse.jpeg" ><figure><img src="http://localhost/wp/wp-content/uploads/horse.jpeg"></figure></a>
                    </div>
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/panda.png" ><figure><img src="http://localhost/wp/wp-content/uploads/panda.png"></figure></a>
                    </div>
                </div>          
            </div>
        </div>
        <div data-name="column" class="drts-display-element-column-6">
            <div class="drts-row drts-gutter-none">
                <div data-name="entity_field_post_title" class="directory-listing-title ">
                    <a href="http://localhost/wp/anuncios/prueba-desde-backend-1/" target="_self" class="drts-entity-1163">TEXT</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我不确定我是否理解，但如果你只想将图片制作成 link，你可以使用带有背景图片的锚标签，如下所示：

<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>

Answer 2

我将选择器保留为变量，以防万一您需要对它们进行微小的更改，但基础工作正常 - 遍历每个 containerDiv，从 linkDiv > <a> 获取 href，以及将 link 应用于每个 imageDiv > <a>

let containerDiv = 'div[id*="drts-content-post-"]';
let linkDiv = 'div[data-name="entity_field_post_title"]';
let imageDiv = 'div[data-type="image"]';

let $container = $(containerDiv).has(linkDiv);

$container.each((index, element) => {
  let link = $(element).find(`${linkDiv} > a`).attr('href');
  $(element).find(`${imageDiv} > a`).attr('href', link);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drts-content-post-1163">
    <div class="drts-display-element-columns-3">
        <div class="drts-row drts-gutter-none">
            <div class="slick-list draggable">
                <div class="slick-track">
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/horse.jpeg" ><figure><img src="http://localhost/wp/wp-content/uploads/horse.jpeg"></figure></a>
                    </div>
                    <div data-type="image" class="slick-slide">
                        <a href="http://localhost/wp/wp-content/uploads/panda.png" ><figure><img src="http://localhost/wp/wp-content/uploads/panda.png"></figure></a>
                    </div>
                </div>          
            </div>
        </div>
        <div data-name="column" class="drts-display-element-column-6">
            <div class="drts-row drts-gutter-none">
                <div data-name="entity_field_post_title" class="directory-listing-title ">
                    <a href="http://localhost/wp/anuncios/prueba-desde-backend-1/" target="_self" class="drts-entity-1163">TEXT</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

感谢 Light，找到了解决方案。第一部分是检测 JS 和 jQuery 是否在 Wordpress 中工作。

// Select all the top level divs, without using ID

alert("JS works");
if (jQuery) {  
  alert('Jquery Loaded');
} else {
  alert('Jquery Not Loaded');
}

这就是 jQuery 在 Wordpress 中的设置方式，否则 $ 将设置为函数。我创建 "linko" 是为了了解 .find()

内部发生的事情

// jQuery code:
jQuery( function( $ ){

  // Safely use the $ alias here
  // Code here will be executed on the document.ready event
  let containerDiv = 'div[id*="drts-content-post-"]';
  let linkDiv = 'div[data-name="entity_field_post_title"]';
  let imageDiv = 'div[data-type="image"]';

  let $container = $(containerDiv).has(linkDiv);

  $container.each((index, element) => {
    let link = $(element).find(`div[data-name="entity_field_post_title"] > a`).attr('href');
    console.log(link);
    let linko = $(element).find(`div[data-type="image"] > a`).attr('href');
    console.log(linko);

    $(element).find(`div[data-type="image"] > a`).attr('href', link);
    console.log($(element).find(`div[data-type="image"] > a`).attr('href'));
  })
});

从具有唯一 ID 的 DIV 中的 <a> 复制 href 并粘贴到 DIV 中的其他地方

Copy href from <a> inside a DIV with unique id and paste somewhere else in that DIV

jquery

href