Question

我正在寻找一位jQuery大师来帮助我解决这个问题。我对代码的访问权限有限，因为它是一个WordPress主题。我的脚本必须进入指定区域，如果仅使用jQuery无法完成，我会喜欢使用JavaScript的建议。这是我要解决的问题：

我需要抓住“gdlr-button”类的EACH按钮上的“href”链接并将href包裹在EACH div.personnel-author-image

内的图像周围

<div class="personnel-item">
    <div class="personnel-author-image gdlr-skin-border">
        <img src="/my/image-location.jpg" alt="" width="720" height="480">
    </div>
    <div class="personnel-info">
        <div class="personnel-author gdlr-skin-title">My Name</div>
        <div class="personnel-position gdlr-skin-info">My Position</div>
    </div>
    <div class="personnel-content gdlr-skin-content">
        <p>
            <a class="gdlr-button small" id="link-joni" href="/my/unique/link-destination">Learn More</a>
            <script>
            // MY SCRIPT GOES HERE
                .......
            </script>
        </p>
    </div>
</div>
... And Repeat
<div class="personnel-item">
  <div class="personnel-author-image gdlr-skin-border">

Answer 1

＆＃13;

    $(function() {
        $('.personnel-author-image > img').wrap(function() {
            return $('<a/>',{href:$(this).closest('.personnel-item').find('.gdlr-button').attr('href')});
        });        
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="personnel-item">
  <div class="personnel-author-image gdlr-skin-border">
    <img src="/my/image-location.jpg" alt="" width="720" height="480">
  </div>
  <div class="personnel-info">
    <div class="personnel-author gdlr-skin-title">My Name</div>
    <div class="personnel-position gdlr-skin-info">My Position</div>
  </div>
  <div class="personnel-content gdlr-skin-content">
    <p>
      <a class="gdlr-button small" id="link-joni" href="/my/unique/link-destination">Learn More</a>
      <script>
        // MY SCRIPT GOES HERE
        .......
      </script>
    </p>
  </div>
</div>

＆＃13;

按照@adeneo的建议将脚本包含在wp_enqeue_script中：

    $('.personnel-author-image > img').wrap(function() {
        return $('<a/>',{href:$(this).closest('.personnel-item').find('.gdlr-button').attr('href')});
    });

Answer 2

这将遍历每个.personnel-item并获取href并将img标记包装在标记中

$(".personnel-item").each(function(){
    var href = $(this).find(".gdlr-button").attr("href");
    $(this).find(".personnel-author-image img").wrap( "<a href='"+href+"'></a>" );
});

继承人jsFiddle

Answer 3

感谢@adeneo这个脚本。他真的是一个忍者！

jsfiddle.net/qs8Lps00

jQuery(function($) {
    $('.gdlr-button').each(function() {
        var img = $(this).closest('.personnel-content').siblings('.personnel-author-image').find('img');
        img.wrap('<a href="'+this.href+'"></a>');
    });
});

Answer 4

这是一个简短的片段，可以做你的建议：

$('.personnel-item').each(function(){
	var href =$(this).find('.gdlr-button').prop('href');
	var img = $(this).find('.personnel-author-image').html();
	$(this).find('.personnel-author-image').html('<a href="'+href+'">'+ img +'</a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personnel-item">
  [...]
<div class="personnel-author-image gdlr-skin-border">
        <img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" alt="" width="25" height="">
    </div>
 <div class="personnel-content gdlr-skin-content">
        <p>
            <a class="gdlr-button small" id="link-joni" href="/my/unique/link-destination">Learn More</a>
        </p>
    </div>
  [...]
    </div>
    <div class="personnel-item">
      [...]
    <div class="personnel-author-image gdlr-skin-border">
        <img src="http://nicolewarner.com/images/stories/Blog_Pictures/Perspective_August_2014/number-2-hi.png" alt="" width="25" height="">
    </div>
 <div class="personnel-content gdlr-skin-content">
        <p>
            <a class="gdlr-button small" id="link-joni" href="/my/other/link-destination">Learn More</a>
        </p>
    </div>
      [...]
    </div>

来自维也纳的问候

需要jQuery忍者才能回答的高级jQuery选择器

4 个答案: