Различить HTML <p> с помощью JQuery / JS

Вот моя проблема: у меня есть куча <p> HTML. Например: <p> Paris </p> <p>London</p> <p> NewYork</p>

Когда я хочу получить текст определенного <p> когда я нажимаю на него, я делаю (используя JQuery)

    $("#saved_research").click(function(){
        console.log($(this).text());
    });

это возвращает меня ParisLondonNewYork. И не конкретный текст из <p> .

Ты знаешь почему ?

С уважением,

Вот точный HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>My News</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="shortcut icon" type="image/x-icon" href="favicon-js.ico">
    <link rel="stylesheet" type="text/css" media="screen" href="news.css">
</head>
<body onload="init();">
    <header>
        <img id="banniere" src="img/job.png"/>
    </header>
    <!--HERE -->
    <div id="recherches">
        <h3 class="titre"> recherches stockées</h3>
        <div id="recherches-stockees">
        </div>

        <h3 class="titre">nouvelle recherche</h3>
        <div id="nouvelle-recherche">
                <input type="text" name="zone_saisie" id="zone_saisie"/>
            <img id="disk" class="icone-disk" src="img/disk30.jpg" onclick="ajouter_recherche()" />
            <BR/>
            <input id="bouton_recherche"type="button" value="OK" onclick="rechercher_nouvelles()"/>
        </div>
    </div>

    <div id="zone-centrale">
        <div id="resultats-container">
            <h3 class="titre">résultat</h3>
            <div id="wait"></div>
            <div id="resultats"></div>
        </div>
    </div>

    <!-- Inclusion des librairies jQuery & Scripts JS -->
    <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
    <script
            src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
            crossorigin="anonymous"></script>
    <script src="scripts/jquery.cookie.js"></script>

    <script src="scripts/util.js"></script>
    <script src="scripts/news.js"></script>

</body>
</html>

Вот точный JS

// Tableau contenant des chaines de caractères correspondant aux recherches stockées
var recherches = [];
// Chaine de caractères correspondant à la recherche courante
var recherche_courante;
// Tableau d'objets de type resultats (avec titre, date et url)
var recherche_courante_news = [];

/*class Paragraphe{
    constructor(id,value){
        this.id = id;
        this.value = value;
    }
}*/


/*1.1 */    
//si clic sur l'image disk alors ajout chaine au tableau recherches[]
//function ajouter_recherche()
function ajouter_recherche(){
    //recuperer la chaine de carachtere
    //verifier si dans recherches, il y a la meme recherche
    const donneeEntree = $("#zone_saisie").val();
    if(recherches.indexOf(donneeEntree) == -1){
        recherches.push(donneeEntree);
        //ajouter l'element aux recherches stockées
        $("#recherches-stockees").prepend('<p class="titre-recherche" ><label onclick=selectionner_recherche(this)>'+donneeEntree+'</label><img src="images/croix30.jpg" class="icone-croix " onclick="supprimer_recherche(this)"/></p>');
        //sauvegarde dans sessionStorage(plus de place que cookie) pour conserver les recherches deja effectuées
        localStorage.setItem("recherches",JSON.stringify(recherches));
    }
    //si clic sur le label => selectionner_recherche(this)
    //si clic sur croix => supprimer_recherche(this)
}


function supprimer_recherche(elt) {
    //supprimer l'element p dans recherches-stockees
    $(elt).parent().remove();


    //  localStorage.clear(); == localStorage.removeItem("recherches");
    //supprimer la recherche du tableau recherches[]
    const indexSupprimer = recherches.indexOf($(elt).parent().parent().val());
    recherches.splice(indexSupprimer);
    //supprimer dans localstorage aussi
    //localStorage.removeItem(this);
    //c'est moche A REFAIRE
    localStorage.setItem("recherches",JSON.stringify(recherches));
}

//controller
function selectionner_recherche(elt) {
    $("#zone_saisie").val("");
    $("#resultats").empty();
    //jquery ??????
    $("#zone_saisie").val(elt.innerText); 
    recherche_courante = elt.innerText;

    //variable globale recherche_courante_news => cookie
    //localstorage.getItem => recuperer le "cookie" === nom de la recherche
    recherche_courante_news = JSON.parse(localStorage.getItem($("#zone_saisie").val()));
    //affichage des recherche sauvegardées dans la zone resultats
    $.each(recherche_courante_news,function(index,value){
        $("#resultats").append('<p class="titre_result"><a class="titre_news" href='+decodeHtmlEntities(value.url)+
        ' target="_blank">'+decodeHtmlEntities(value.titre)+
        '</a><span class="date_news">'+decodeHtmlEntities(value.date)+'</span><span class="action_news" onclick="sauver_nouvelle(this)"><img src="img/horloge15.jpg"/></span></p>'); 
    });

}



//model
function init() {
    //recuperer les données du stockage local
    let obj_json = localStorage.getItem("recherches");
    let obj = JSON.parse(obj_json);
    if(obj != ""){
        $(obj).each(function(index,value){
            recherches.push(value);
            $("#recherches-stockees").prepend('<p class="titre-recherche" ><label onclick=selectionner_recherche(this)>'+value +'</label><img src="images/croix30.jpg" class="icone-croix " onclick="supprimer_recherche(this)"/></p>');
        });
    }
    //on remplit la partie recherches-stockées de ces données


}

//model
function rechercher_nouvelles() {
    //faire une requeste get ? !!!pas secure!!! avec les données de recherche_courante ? ou direct avec value ?
    //on nettoye la zone de resultat pour eviter d'afficher encore et encore
    $("#resultats").empty();
        $("#wait").css("display","block");
        const data = $("#zone_saisie").val();
        //.get est asynchrone
        $.get("https://carl-vincent.fr/search-internships.php?data="+data,maj_resultats);
    //vider recherche_couraznt_news sinon tout les cookies se superposeront ( 1: coucou ..... 2 : coucou, salut)
    recherche_courante_news = []; //argh c moche
    //et on la remplis avec le contenu du localstorage de la recherche en question
    //on ne peut pas utiliser $("#zone_saisie").val() car si l'utilisateur change la recherche mais veut quand m
    //même faire l'action alors ça marchera pas => exemple impossible d'acceder à l'element car non existant
    //il faudrait récuperer le label sur la recherche_saved sur laquelle on clic
/*  recherche_courante_news = JSON.parse(localStorage.getItem($("#recherches-stockees").click(function(){
        return $(this).text();
    })
    ));*/
    /*$("#recherches-stockees > p").click(function(){
        console.log($(this).text());
        alert("yes");
    })*/

//HERE/////////////////////////////////////////

    $('#recherches-stockees > p').on('click', function() {
        console.log($(this).text());
    });

}


//function callback => si jamais la requete ajax get reussis alors on fait celle ci
//view
function maj_resultats(res) {
    $("#wait").css("display","none");

    //res est un objet de plusieurs offres, on veut toute les afficher dans la case resultat
    $(res).each(function(index,value){
        $("#resultats").append('<p class="titre_result"><a class="titre_news" href='+decodeHtmlEntities(value.url)+
        ' target="_blank">'+decodeHtmlEntities(value.titre)+
        '</a><span class="date_news">'+decodeHtmlEntities(value.date)+'</span><span class="action_news" onclick="sauver_nouvelle(this)"><img src="img/horloge15.jpg"/></span></p>'); 
    });


}

//manque : creer un objet à envoyer 
//delete dans recherche_courante_news   

function sauver_nouvelle(elt) {
    //parentElement => titre
    let obj = {
        "titre" : $(elt).parent().find("a").text(),
        "date" : $(elt).parent().find(".date_news").text(),
        "url" : $(elt).parent().find("a").attr('href')
    }
    //$(elt).firstChild.attr("src","");
    //$(elt).attr("src","img/disk15.jpg");
    $(elt).html("<img src = img/disk15.jpg />");
    $(elt).attr("onclick","supprimer_nouvelle(this)");
    //creer l'objet il faut
    if(indexOfResultat(recherche_courante_news,obj) == -1){
        recherche_courante_news.push(obj);
        localStorage.setItem("recherches_courante_news",JSON.stringify(recherche_courante_news));
    //on a donc 1 cookie par recherche, faire des verif pour pas pouvoir mettre le même plusieurs fois ??
        localStorage.setItem( $("#zone_saisie").val(),JSON.stringify(recherche_courante_news));
    }
}


function supprimer_nouvelle(elt) {
    let obj = {
        "titre" : $(elt).parent().find("a").text(),
        "date" : $(elt).parent().find(".date_news").text(),
        "url" : $(elt).parent().find("a").attr('href')
    }
    //$(elt).attr("src","");
    //$(elt).attr("src","img/horloge15.jpg");
    $(elt).html("<img src = img/horloge15.jpg />");
    $(elt).attr("onclick","sauver_nouvelle(this)");
    if(indexOfResultat(recherche_courante_news,obj) != -1){
        recherche_courante_news.splice(indexOfResultat(obj,recherche_courante_news));
        localStorage.setItem("recherches_courante_news",JSON.stringify(recherche_courante_news));
        localStorage.setItem($("#zone_saisie").val(),JSON.stringify(recherche_courante_news));

    }
}



//Autocompletion
//A chaque Entrée de clavier => keyup, verifier si le mot n'a pas une ressemblance dans le localstorage (recherches sauvegardées)
//Apparement Jquery UI le fait tres bien

//Model et view
var test = ['Grenoble','Lyon','Paris'];
$("#zone_saisie").autocomplete({
    source : recherches,
    focus : true
}).keypress(function(event){
    if(event.keyCode === 13){
        rechercher_nouvelles();
    }
});

Всего 3 ответа


Похоже, причина того, что вы получаете весь конкатенированный p текст, заключается в том, что вы обрабатываете событие click для родительского div, и ссылка this относится к этому div. Вызов .text() для этой родительской ссылки дает весь дочерний текст. Обработчик кликов должен вызываться с объектом события, имеющим конкретную цель, и вы можете использовать его, чтобы получить текст только того, что было нажато.

$("#saved_research").click(function(event){
  var x = event.target; // event.target has the exact element clicked
  console.log($(x).text()); // the text of the clicked element
});

Добавьте слушателя к <p> , а не к родительскому контейнеру, и затем ссылка на него внутри слушателя будет ссылаться на <p> , поэтому $(this).text() даст вам текст отдельного <p> :

$('#saved_research > p').on('click', function() {
  console.log(Ƈp',$(this).children().eq(0).text());
  console.log(ƈp',$(this).children().eq(1).text());
  console.log(Ɖp',$(this).children().eq(2).text());

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="saved_research">
<p>Paris</p> <p>London</p> <p>NewYork</p>
</div>

Или используйте делегирование события:

$('#saved_research').on('click', 'p', function() {
  console.log($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="saved_research">
<p>Paris</p> <p>London</p> <p>NewYork</p>
</div>


Итак, ваш javascript говорит: «получить все <p> внутри #saved_research». Вам нужно добавить определенный идентификатор в ваш html. Есть много способов сделать это, но один из лучших способов сделать это с атрибутами данных:

<div id="saved_research">
   <p data-paragraph="1">Paris</p>
   <p data-paragraph="2">London</p>
   <p data-paragraph="3">New York</p>
</div>

$("#saved_research").click(function() {
    console.log($("[data-paragraph=Ƈ']").text());
});

Используйте атрибуты данных - а не идентификаторы или классы - для обозначения в вашем html вещей, связанных с javascript. Некоторые считают это (включая меня) лучшей практикой. Это позволяет вам узнать, что в вашем html специально для javascript. Например, когда вы смотрите в будущем свой html, будете ли вы помнить, что id #saved_research используется javascript? Если нет, то кто-то, занимающийся дизайном страницы, может изменить #saved_research на #save_research, думая, что он связан только с CSS. Таким образом, они нарушают JavaScript. Используя атрибуты данных, это очень ясно: этот идентификатор используется для JavaScript.

Изменить: на основе вашего комментария о html, не существующем на странице при загрузке страницы, вот что вам нужно сделать:

$(window.document).on('click', "#saved_research", function() {
    console.log($("[data-paragraph=Ƈ']").text());
});

Обратите внимание на другой формат с .on('click' ? Этот формат необходим, если у вас есть элементы, которые динамически добавляются на страницу. Формат .click работает, только если элемент существует на странице при первой загрузке страницы. Вы можете используйте этот .on('click' с любыми другими ответами, перечисленными на этой странице, все они работают с этим форматом.


Есть идеи?

10000