jquery
2013-10-28 48 views 1 likes 
1

好的，通過HTML元素循環和改變背景顏色

所以我有下面JQuery的代碼，這會改變一個dt的元件的背景顏色，其具有分配一個特定的類：

var match = $('.matchedOn:contains("' + matchedString + '")'); 
         $(match).html($(match).html().replace(matchedString, "<span 
    style='background-color:#FFFF00'>" + matchedString + "</span>"));

此是$ .each循環的一部分，並且似乎可行，如果循環經歷一次迭代。例如，我有一個數據集，當需要突出顯示兩個可能的匹配時返回。爲了證明這一點，我將模擬一些示例文本，這將形成循環。

第一次迭代：字符串matchedString =你好

第二次迭代：字符串matchedString =世界

這兩個字符串是相同的DT元素中，因此，例如：

「這是你好世界範例字符串'

以上JQuery代碼似乎只看到單詞'你好'而不是'世界'

任何想法爲什麼？我調試並遍歷代碼，我可以看到兩個matchedString可變參數都設置正確。

編輯 好吧，抱歉耽擱，我已經成功地讓有​​問題的代碼將與答案幫助的保持。

$.ajax({ 
      type: "POST", 
      url: "Default.aspx/GetPopUpData", 
      cache: false, 
      data: JSON.stringify({ messageId: messageId, messageType: messageType, aml: true }), 
      contentType: "application/json; charset=utf-8", 

      dataType: "json", 
      error: function (xhr) { 

       var contentType = xhr.getResponseHeader("Content-Type"); 
       if (xhr.status === 401 && contentType.toLowerCase().indexOf("text/html") >= 0) { 
        window.location.reload(); 
       } 
      }, 
      success: function (msg) { 

       var mtData = msg.d[0]; 

       var tag13C = ''; 
       var tag33BSeqB = ''; 
       var tag50 = ''; 
       var tag50SeqB = ''; 
       var tag52 = ''; 
       var tag52SeqB = ''; 
       var tag53 = ''; 
       var tag54 = ''; 
       var tag55 = ''; 
       var tag56 = ''; 
       var tag56SeqB = ''; 
       var tag57 = ''; 
       var tag57SeqB = ''; 
       var tag58 = ''; 
       var tag59 = ''; 
       var tag59SeqB = ''; 
       var tag70 = ''; 
       var tag70SeqB = ''; 
       var tag72 = ''; 
       var tag72SeqB = ''; 
       var tag77B = ''; 
       var violationCount = ''; 

       if (messageType == "202") { 
        if (mtData["Tag13C"].length) { 
         tag13C = $.map(mtData["Tag13C"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag52"].length) { 
         tag52 = $.map(mtData["Tag52"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag53"].length) { 
         tag53 = $.map(mtData["Tag53"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag54"].length) { 
         tag54 = $.map(mtData["Tag54"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag56"].length) { 
         tag56 = $.map(mtData["Tag56"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag57"].length) { 
         tag57 = $.map(mtData["Tag57"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag58"].length) { 
         tag58 = $.map(mtData["Tag58"], function (ele) { return '<dd class=matchedOn>' + ele; }).join(''); 
        } 
        if (mtData["Tag72"].length) { 
         tag72 = $.map(mtData["Tag72"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag50SeqB"].length) { 
         tag50SeqB = $.map(mtData["Tag50SeqB"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag52SeqB"].length) { 
         tag52SeqB = $.map(mtData["Tag52SeqB"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag56SeqB"].length) { 
         tag56SeqB = $.map(mtData["Tag56SeqB"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag57SeqB"].length) { 
         tag57SeqB = $.map(mtData["Tag57SeqB"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag59SeqB"].length) { 
         tag59SeqB = $.map(mtData["Tag59SeqB"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag70SeqB"].length) { 
         tag70SeqB = $.map(mtData["Tag70SeqB"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 
        if (mtData["Tag72SeqB"].length) { 
         tag72SeqB = $.map(mtData["Tag72SeqB"], function (ele) { return '<dd>' + ele; }).join(''); 
        } 

        $('<div class=message><pre><dl><dt>Transaction Reference:</dt><dd>' + mtData["Tag20"] + 
        '</dd><dt>Related Reference:</dt><dd>' + mtData["Tag21"] + 
        '</dd>' + (tag13C ? '<dt>Time Indication:</dt><dd>' + tag13C : '') + 
        '</dd><dt>Value Date/Currency Code/Amount:</dt><dd>' + mtData["Tag32"] + 
        '</dd>' + (tag52 ? '<dt>Ordering Institution:</dt><dd>' + tag52 : '') + 
        '</dd>' + (tag53 ? '<dt>Senders Correspondent:</dt><dd>' + tag53 : '') + 
        '</dd>' + (tag54 ? '<dt>Receivers Correspondent:</dt><dd>' + tag54 : '') + 
        '</dd>' + (tag56 ? '<dt>Intermediary:</dt><dd>' + tag56 : '') + 
        '</dd>' + (tag57 ? '<dt>Account With Institution:</dt><dd>' + tag57 : '') + 
        '</dd>' + (tag58 ? '<dt>Beneficiary Institution:</dt><dd>' + tag58 : '') + 
        '</dd>' + (tag72 ? '<dt>Sender to Receiver Information:</dt><dd>' + tag72 : '') + 
        '</dd><dt>Ordering Customer:</dt><dd>' + tag50SeqB + 
        '</dd>' + (tag52SeqB ? '<dt>Ordering Institution:</dt><dd>' + tag52SeqB : '') + 
        '</dd>' + (tag56SeqB ? '<dt>Intermidary Institution:</dt><dd>' + tag56SeqB : '') + 
        '</dd>' + (tag57SeqB ? '<dt>Account With Institution:</dt><dd>' + tag57SeqB : '') + 
        '</dd>' + (tag59SeqB ? '<dt>Beneficiary Customer:</dt><dd>' + tag59SeqB : '') + 
        '</dd>' + (tag70SeqB ? '<dt>Remittance Information:</dt><dd>' + tag70SeqB : '') + 
        '</dd>' + (tag72SeqB ? '<dt>Sender to Receiver Information:</dt><dd>' + tag72SeqB : '') + 
        '</dd>' + (tag33BSeqB ? '<dt>Currency/Instructed Amount:</dt><dd>' + tag33BSeqB : '') + 
        '</dd></dl></pre></div>').appendTo('#mt202'); 

       } 

       var amlData = msg.d[1]; 

       if (amlData.length) { 

        $.each(amlData, function (index, item) { 
         var countries = ''; // intialize as empty string 
         var aka = ''; 
         var identNum = ''; 
         var listReason = ''; 
         var names = ''; 

         var reportCount = index + 1; 

         if (item.Countries.length) { 
          countries = $.map(item.Countries, function (ele) { return '<dd>' + ele; }).join(''); 
         } 

         if (item.Aka.length) { 
          aka = $.map(item.Aka, function (ele) { return '<dd>' + ele; }).join(''); 
         } 

         if (item.IdentNumbers.length) { 
          identNum = $.map(item.IdentNumbers, function (ele) { return '<dd>' + ele; }).join(''); 
         } 

         if (item.ListingReasons.length) { 
          listReason = $.map(item.ListingReasons, function (ele) { return '<dd>' + ele; }).join(''); 
         } 

         if (item.Names.length) { 
          names = $.map(item.Names, function (ele) { return '<dd>' + ele; }).join(''); 
         } 

         var matchedItem = item.MatchedItem.trim(); 
         var matchedTag = item.MatchedTag; 
         var senderBic = item.SenderBIC.trim(); 


         var match = $('.matchedOn:contains("' + matchedTag + '")'); 
         $(match).html($(match).html().replace(matchedTag, "<span style='background-color:#FFFF00'>" + matchedTag + "</span>")); 




        }); 

       } 

       else { 
        $('<h2>Violation Report(' + amlData.length + ')</h2>').appendTo('#AMLresults'); 
       } 
      } 

     }); 

     $('#myModal').modal();

希望這有助於

編輯

所以第一循環與包含DT的一類matchedOn的內容創建一個DIV。可以包含更多匹配的第二個循環用於顯示aml匹配。

所以在Tag58中，'This is a test case，please hightlight me'這個詞被寫入模態。那麼aml循環就具有了匹配標籤，所以第一次圍繞命中是'測試用例'，因此任何包含匹配類的標籤都需要測試高亮，等等。

來源

2013-10-28 CSharpNewBee

+1

請在[jsfiddle]（http://jsfiddle.net/）上重新創建問題，並在您的問題中發佈鏈接。這將有助於！ –

+0

嗨palash，無法做到這一點，因爲代碼是使用後面的C＃代碼動態構建的。 – CSharpNewBee

+0

爲什麼在'.replace（）'中有'matchedTag'？它不應該是'matchedString'嗎？我錯過了一些東西。你突出顯示這個詞還是整個'dt'？ – skip405

回答

0

我認爲你的循環有問題...很難說，因爲我們沒有看到你的HTML或循環。

我開始重現這個問題，並首先使它像這樣 - http://jsfiddle.net/h7Zf2/1/。我插入了一個警告，指出它有點停止第一次迭代（只突出顯示一個單詞），並在單擊警報後 - 第二個單詞突出顯示。

這使我找到了解決問題的可能方案。我把字符串數組和遍歷文本從數組替換詞：http://jsfiddle.net/h7Zf2/2/

var matchedString = ['ipsum', 'dolor', 'odio']; 
for(var i = 0; i <= matchedString.length; i++) { 
    var match = $('.matchedOn:contains("' + matchedString[i] + '")'); 
    match.html(match.html().replace(matchedString[i], "<span style='background-color:#FFFF00'>" + matchedString[i] + "</span>")); 
}

希望你能在這裏找到一些有用的東西:)

來源

2013-10-28 10:56:37 skip405

+1

不適用於一個單詞的多個實例：http://jsfiddle.net/h7Zf2/3/ – Nenotlep

+0

@Nenotlep，很好的接收，謝謝你 – skip405

+0

Skip405 - 感謝您對此提供幫助。我會試着把一些東西放在一起，這更好地解釋了我的問題。給我一個小時左右的時間，因爲我需要c＃人員的幫助來獲取信息 – CSharpNewBee

2

如果你不介意的替代品，那麼看看WORKING FIDDLE

您可以使用RegExp讓你做的東西。我發現它從我的最愛問題highlight-a-word-with-jquery其中@Andrew Hedges建議 -

function hiliter(word, element) { 
    var rgxp = new RegExp(word, 'g'); 
    var repl = '<span class="myClass">' + word + '</span>'; 
    element.innerHTML = element.innerHTML.replace(rgxp, repl); 
} 
hiliter('dolor');

爲您的代碼它，會是這樣的： -

var stringArray = ["Lorem", "Ipsum", "dummy"]; 

    function highlight_words(word, element) { 
     var rgxp = new RegExp(word, 'g'); 
     var repl = '<span style="background-color:#FFFF00">' + word + '</span>'; 
     element.innerHTML = element.innerHTML.replace(rgxp, repl); 
    } 
    $.each(stringArray, function (index, value) { 
     var matchedString = value; 
     var element = document.getElementsByClassName('matchedOn'); 
     highlight_words(matchedString, element[0]); 
    });

即使你可以看看jquery.highlight

來源

2013-10-28 11:23:05 Shubh

+0

這裏有一個CaSeSeNsiTivitY問題，使用像'['I'，'Love'，'Ponies']這樣的數組取代「我愛PONIES」 - >「我愛小馬」 - 風格上的重要差異。想象一下，如果你想要「喜歡」這樣的詞，每個「And」大寫使得一個風格類似垃圾郵件的閱讀。 – Nenotlep

+0

Shubh，我跑過你的代碼，我無法讓它工作。請參閱上文以瞭解我正在嘗試的內容。我認爲問題是，我沒有一個字符串數組，我有一個字符串在一個循環中，匹配一個單一的元素。 – CSharpNewBee

0

Shubh達斯古普塔的答案是夠好的，但是在那裏存在一個CaSeSeNiTivitY問題，使用像['I', 'Love', ' Ponies']這樣的數組它將代替i LOVE Ponies與I Love Ponies - 一個風格上重要的差異即

總之，這裏的另一個正則表達式，關閉不全，不具有干擾的情況下：jsfiddle.net/h7Zf2/4該解決方案基本上是從https://stackoverflow.com/a/1230491/694325

複製有使用有兩種不同的方法，測試與實際看到的內容哪一個對你會更好。也很大程度上取決於目標語言。對於英語而言，這比以德語或芬蘭語爲例：對於欣賞Leben和Partner，Lebensabschnittpartner!應該發生什麼？或英文Love vs Lovely：hilight還是不是？

來源

2013-10-28 12:14:03 Nenotlep

相關問題
最新問題

 相關問題