如果发现如何追加,如果没有找到则更换? (xml find.each循环)

时间:2014-03-26 06:08:09

标签: javascript jquery

我试图在xml文件中搜索字符串值,然后在找到字符串值时附加到div。如果根本找不到,那么我需要在找不到搜索词的同一div中显示错误文本。

这基本上应该是一个搜索页面,它将搜索到的项目加载到div内容中。

目前我的内容正在加载正常。搜索到的术语如果找到,则从xml加载所有相应的div,但如果找不到搜索词,我就无法显示错误。

我的XML:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <item>
        <animal_id>1_1</animal_id>
        <animal_title>Sparrow</animal_title>
        <animal_generic>Birds 1</animal_generic>
        <animal_category>Birds</animal_category>
        <animal_code>a1</animal_code>
        <animal_img>http://i.imgur.com/R0754lr.png</animal_img>
        <animal_url>1_1_Animals1.html</animal_url>
    </item>
    <item>
        <animal_id>1_2</animal_id>
        <animal_title>Crow</animal_title>
        <animal_generic>Birds 2</animal_generic>
        <animal_category>Birds</animal_category>
        <animal_code>b2</animal_code>
        <animal_img>http://i.imgur.com/R0754lr.png</animal_img>
        <animal_url>1_2_Animals2.html</animal_url>
    </item>
    <item>
        <animal_id>1_3</animal_id>
        <animal_title>Parrot</animal_title>
        <animal_generic>Birds 3</animal_generic>
        <animal_category>Birds</animal_category>
        <animal_code>c3</animal_code>
        <animal_img>http://i.imgur.com/R0754lr.png</animal_img>
        <animal_url>1_3_Animals3.html</animal_url>
    </item>
</items>

HTML

<div class="list-h">

</div>

的Javascript

var s_string = 'bird';

$.ajax({
    url: 'https://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml', // name of file you want to parse
    dataType: "xml",

    success: function parse(xmlResponse){

    $(xmlResponse).find("item").each(function() {
        var pr_id = $(this).find("animal_id").text();
        var p_title = $(this).find("animal_title").text();
        var p_category = $(this).find("animal_category").text();
        var p_code = $(this).find("animal_code").text();
        var p_img = $(this).find("animal_img").text();
        var p_url = $(this).find("animal_url").text();
        var p_gen_name = $(this).find("animal_generic").text();

        var p_xml_string = p_title + p_gen_name, results_string = '', error;
        if(s_string)
        var s_string2 = s_string.replace("%20"," ");
        //console.log(p_xml_string + s_string2);

        if(p_xml_string.toLowerCase().indexOf(s_string2) > -1){
            //console.log("FOUND : " + p_title);

            results_string = '<div class="item"><div class="item-h"><a class="item-anchor" href="' + p_url + '"><div class="item-image"><img class="item-image-first" src="' + p_img + '" alt=""><div class="item-meta"><h2 class="item-title">' + p_title + '</h2><span class="item-arrow"></span></div></div></a></div></div>';
                found_string = true;  //// KEEP VALUES = TRUE OR FALSE IN AN ARRAY...GLOBAL ARRAY, AND THEN SEARCH THAT ARRAY FOR TRUE. IF ALL FALSE, SHOW ERROR.
            }

        if(found_string){
        $('.list-h').append(results_string);
            $('<div id="error_div"></div>').text("found");
        }
        }); //xmlResponse .each function end.


        },  error: function(){console.log('Error: Animals info xml could not be loaded.');}

        });



// START OF NOT FOUND SEARCH SCRIPT
    $(window).load(function(){
    var error_found = $('#error_div').text(); console.log(error_found);
        setTimeout(function(){ 
        if(error_found != 'found'){
        var results_string = '<center>Your Search Query "<b>' + $.url().param('q').replace("%20"," ") + '" was not found!</b> Maybe you entered an invalid search query.</center>';
        $('.list-h').append(results_string); } 
        }, 0);
    });
// END OF NOT FOUND SEARCH SCRIPT

这里的js是完整的XML网址:http://jsfiddle.net/mohitk117/B89Ms/

有人可以帮我解决这个问题吗?谢谢!

2 个答案:

答案 0 :(得分:0)

我有点不确定所有内容是如何组合在一起的,因为javascript代码不是不言自明的。但是,你能从这里解决这个问题开始......?

    if(s_string)
    var s_string2 = s_string.replace("%20"," ");
    //console.log(p_xml_string + s_string2);

    if(p_xml_string.toLowerCase().indexOf(s_string2) > -1){
在此表达式中使用

s_string2变量超出范围...

if(p_xml_string.toLowerCase().indexOf(s_string2) > -1){

你想在那里做什么?上面的表达式将始终求值为false,因为s_string2未定义。换句话说,无法在if块内进行任何处理

同样,这个变量被实例化并在同一时间处理......

 if(s_string)
     var s_string2 = s_string.replace("%20"," "); //<--- This variable's lifecycle ends here

并且,在您解决上面的变量问题之前,此表达式始终为false

if(p_xml_string.toLowerCase().indexOf(s_string2) > -1)

答案 1 :(得分:0)

某些更改可能会解决您的问题

html

中添加div
<div id="error_div"></div>

更改以下代码

if (s_string) var s_string2 = s_string.replace("%20", " ");
//console.log(p_xml_string + s_string2);
if (p_xml_string.toLowerCase().indexOf(s_string2) > -1) {

var s_string2='';
if (s_string) s_string2 = s_string.replace("%20", " ");
if (s_string2 && p_xml_string.toLowerCase().indexOf(s_string2) > -1) {

更改found_string代码,

if (found_string) {
   $('.list-h').append(results_string);
   $('#error_div').text("found");
}

可选择为error_div

添加css
#error_div {
    color:red;
}

Live Demo

已更新 success代码

    var found_string = false; // define found_string globally
    $(xmlResponse).find("item").each(function () {
        var pr_id = $(this).find("animal_id").text();
        var p_title = $(this).find("animal_title").text();
        var p_category = $(this).find("animal_category").text();
        var p_code = $(this).find("animal_code").text();
        var p_img = $(this).find("animal_img").text();
        var p_url = $(this).find("animal_url").text();
        var p_gen_name = $(this).find("animal_generic").text();

        var p_xml_string = p_title + p_gen_name,
            results_string = '',
            error;
        var s_string2 = '';

        if (s_string) s_string2 = s_string.replace("%20", " ");
        if (s_string2 && p_xml_string.toLowerCase().indexOf(s_string2) > -1) {
            //console.log("FOUND : " + p_title);
            results_string = '<div class="item"><div class="item-h"><a class="item-anchor" href="' + p_url + '"><div class="item-image"><img class="item-image-first" src="' + p_img + '" alt=""><div class="item-meta"><h2 class="item-title">' + p_title + '</h2><span class="item-arrow"></span></div></div></a></div></div>';
            found_string = true; //// KEEP VALUES = TRUE OR FALSE IN AN ARRAY...GLOBAL ARRAY, AND THEN SEARCH THAT ARRAY FOR TRUE. IF ALL FALSE, SHOW ERROR.
        }
        if (found_string) { // if found then append in list
            $('.list-h').append(results_string);
        }

    }); //xmlResponse .each function end.
    if (found_string) { // if found then empty error div
        $('#error_div').text("");
    } else { // else show error text or not found
        $('#error_div').text("not found");
    }

更新了 Found Demo Not Found Demo