Question

我有以下列表的第一个用于桌面，另一个用于移动。

我正在尝试将href属性添加到内部文本与JSON响应匹配的所有链接：那些与JSOn不匹配的字母替换它们以显示它们被禁用。基于JSON中提供的字母组列表，如果从JSON响应返回的字母与alphabetnav或alphabetnavmobile中的字母不匹配，我想替换并更新 lphabetnav和alphabetNavMobile < /强>

这是我的代码FIDDLE DEMO我得到了很多重复

实施例

<div class="alphabetnav"><a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a></div> <div class="alphabetNavMobile"><a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a></div>

如果JSON返回G F和I. 只有G，F和我有href，其他字母将有<span>

输出

<div class="alphabetnav"> <span> A</span><span> B</span><span>C</span><span> D</span> <span> E</span> <a href="#F">F</a <a href="#G">G</a> <span> H</span>... .... </div> <div class="alphabetNavMobile"> <span> A</span><span> B</span><span>C</span><span> D</span> <span> E</span> <a href="#F">F</a <a href="#G">G</a><span> H</span> ... .... </div>

Answer 1

您似乎希望向内部文本与JSON响应匹配的所有链接添加href属性：

好吧，让我们说你收到你的信件作为一个数组，然后你可以获取所有链接，并为那些文字在提供的字母中的人添加一个href：

var letters = ['G', 'F'];

$('a').each(function(idx, a) {                // grab all links, and for each of them
    var testLetter = $(a).text().trim();      // grab the inner text which should be the letter (without any trailing or leading whitespace)
    if (letters.indexOf(testLetter) !== -1) { // if the letter is in the data received from the JSON
        $(a).attr('href', '#' + testLetter);  // add the href attribute with that letter
    } else if($(a).attr('href')) {            // otherwise, if the link has an href that doesn't match any letters
        $(a).removeAttr('href');              // remove it
    }
});

＆＃13;

var letters = ['G', 'F'];
$('a').each(function(idx, a) {
  var testLetter = $(a).text().trim();
  if (letters.indexOf(testLetter) !== -1) {
    $(a).attr('href', '#' + testLetter);
    console.log('adding href to ' + testLetter);
  } else if ($(a).attr('href')) {
    console.log('removing href from ' + testLetter);
    $(a).removeAttr('href');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#A">A</a>
<a href="#B">B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F </a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>

＆＃13;

如果你想要alphabetnav和alphabetNavMobile中的所有链接，那么只需将上面的函数作为命名函数提取并使用以下选择器并在两个div上调用该函数：

function addAndReplaceLinks(idx, a) { /* code from the anonymous function above */ }

// apply the function to both divs
$('.aphabetnav a').each(addAndReplaceLinks)         // select all links from the alphabetnav and do the replacements
$('.alphabetNavMobile a').each(addAndReplaceLinks); // select all links from the alphabetNavMobile and do the replacements

Jquery根据JSON值动态替换文本

1 个答案: