Question

我已经尝试了每个组合/个人选择器，但无法想出这个。

我有一个'包装'页面，其中有两个带有id的主要div： TOC容器主题的容器

topic-container div通过jquery .load函数加载了一个html页面（我无法修改其来源）。

这些已加载页面中的标签有href元素，我需要循环并更改。这是加载页面的html：

<div id="help-content">
<table class="relatedtopics aboveheading" cellpadding="0" cellspacing="0" border="0">
        <tr valign="top">
            <td width= "16">
                <p class="bodytext"><a href="overview.htm" target="_self"><img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></a></p></td>
            <td width= "16">
                <p class="bodytext"><a href="accessing_solutions.htm" target="_self"><img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></a></p></td>
            <td width= "16">
                <p class="bodytext"><a href="best_practice_browser.htm" target="_self"><img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></a></p></td>
        </tr>
    </table>

    <p class="bodytext">Contact your system administrator for instructions to change your password.</p>
    <p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
    <p class="bodytext">Complete the following steps to change your password:</p>
    <ol class="numberlist"><li class="numberlist">On the Logon window, click the <span class="procedureinterfaceelement">Change Password</span> link.</li><li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.</li><li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.</li><li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li></ol></div>

我有这个在加载页面后调用的函数：

$('#help-content').find('a').each(function() {
    var initHref = $(this).attr('href');
    console.log(initHref);
    var prefix = '?topicID=';
    var newHref = prefix+initHref;
    $(this).attr('href', newHref);
});

如何使用jquery更改页面中的所有href值？我尝试过针对每个选择器:(

Answer 1

您可以使用以下vanilla JavaScript语句获取页面上的所有锚标记

document.querySelectorAll('a')

希望这有助于您初步了解如何针对您的解决方案进行扩展。快乐的编码。

Answer 2

<强> 1。您的代码有效，但您只记录原始代码 href值。如果您在代码末尾再次登录，则会看到更改。

更简单的选择器只是$('#help-content a')，然后您就不需要.find()方法调用。
JQuery .each() 方法会自动传递参数使得枚举元素的引用更加简单，所以使用它。
_target=self仅在您使用否时才有必要代码中支持较长的frameset元素。默认情况下，链接在当前窗口中打开。
不推荐使用vspace和hspace HTML属性。
图像的所有其他样式（以及您的td元素，以及其他所有内容）都应该真的完成用CSS。而且，因为你的每个造型都是相同的在图像中，单个CSS规则可以将它们全部设置起来。
虽然您的代码确实有效，但您的prefix和newHref变量仍然有用因为你只使用过一次，所以并不是必需的。

＆＃13;

// When the DOM is ready...
$(function(){
  $('#help-content a').each(function(idx, el) {
    var initHref = $(el).attr('href');
    $(el).attr('href', '?topicID=' + initHref);
    console.log("Original href: " + initHref, " - New href: " + $(el).attr('href'));     
  });
});

＆＃13;

/* Don't use HTML to style your page. That's what CSS is for.
   And, using CSS will remove the need for redundant HTML. */
#help-content img {
  height:16px;
  width:17px;
  text-align:bottom;
  border:none;
}

#help-content table.relatedtopics { border-collapse:collapse; border:none; border-spacing:0; }
#help-content table.relatedtopics tr { vertical-align:top; }
#help-content table.relatedtopics td { padding:0; width:16px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help-content">
  <table class="relatedtopics aboveheading">
    <tr>
      <td>
        <p class="bodytext">
          <a href="overview.htm">
            <img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home">
          </a>
        </p>
      </td>
      <td>
        <p class="bodytext">
          <a href="accessing_solutions.htm">
            <img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic">
          </a>
        </p>
      </td>
      <td>
        <p class="bodytext">
          <a href="best_practice_browser.htm">
            <img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic">
          </a>
        </p>
      </td>
    </tr>
  </table>

  <p class="bodytext">Contact your system administrator for instructions to change your password.</p>
  <p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
  <p class="bodytext">Complete the following steps to change your password:</p>
  
  <ol class="numberlist">
    <li class="numberlist">On the Logon window, click the 
      <span class="procedureinterfaceelement">Change Password</span> link.
    </li>
    <li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.
    </li>
    <li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.
    </li>
    <li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li>
  </ol>
</div>

＆＃13;

使用jquery定位页面中的所有元素

2 个答案: