Nästlat UL komma åt via e.target

Permalänk

Nästlat UL komma åt via e.target

Hej

Jag håller på att skapa en sida för att ta ut hundar enligt HTML koden nedan:

<!doctype> <html lang="en"> <head> <meta charset="utf-8"> <title>Dog breeds</title> <!-- Boostrap & egen CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootst..." integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="dogs.css"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <script src="dogs.js" defer></script> </head> <body> <div id="mainConainer"> <header> <h1>Hundraser</h1> </header> <main> <section id="dogBreedsMenues"> <h2>Meny</h2><br><br> <ul id="headDogBreedsContainer"></ul> </section> <section id="dogBreedsImgs"> <h2 id="presentDogBreed">Randombilder </h2> <button type="button">Ladda - Random bild</button> <img id="insurtDogBreedImgs" src="" alt=""> </section> </main> </div> </body> </html>

Sidan sköts av Javascript:

// Refresh knapp för random bilder let dogBreedDefault; let getBtnRefresh = document.querySelector('button'); getBtnRefresh.addEventListener('click', getRandomImgs); getBtnRefresh.textContent = "Ny bild!"; // Gäler för hela projektet --------------------------------------------------------- let getPlaceforImgs = document.querySelector('#insurtDogBreedImgs'); let getDogBreedsStrPlace = document.querySelector('#presentDogBreed'); let createdLiForUl; let getBreedPlace = document.querySelector('#headDogBreedsContainer'); //Hur skicka in vartbael på ett mer riktigt sätt? let getAllDogBreeds; // Menyn skapas med både huvud och underraser ---------------------------------------- getAllBreed(); function getAllBreed() { let requestBreed = new XMLHttpRequest(); requestBreed.addEventListener('load', renderDogBreedMenue); let urlStr = 'https://dog.ceo/api/breeds/list/all'; requestBreed.open('GET', urlStr); requestBreed.send(); } function renderDogBreedMenue() { let getParsedListOfAllBreed = JSON.parse(this.responseText); getParsedListOfAllBreed = getParsedListOfAllBreed['message']; //Checka om hurvida min meny finns eller inte let checkIfAnyChildNode = document.querySelector('#headDogBreedsContainer').textContent; for (let listAllBreed in getParsedListOfAllBreed) { if (checkIfAnyChildNode === "") { createdLiForUl = document.createElement('li'); createdLiForUl.setAttribute('class', 'dogBreedBox'); let createdPForLiInUl = document.createElement('p'); //Huvud hundrasaerna läggs i P element för att lätttare plockas ut getAllDogBreeds = listAllBreed; // Adderar blanksteg ( ' ' ) sist i regeln nedan för funktionen getRandomImgs och raden med ID = 3423 createdPForLiInUl.textContent = getAllDogBreeds.charAt(0).toUpperCase() + getAllDogBreeds.slice(1); createdLiForUl.appendChild(createdPForLiInUl); getBreedPlace.appendChild(createdLiForUl); } getSubBreeds = getParsedListOfAllBreed[listAllBreed]; let createdSubUlForLi = document.createElement('ul'); createdSubUlForLi.setAttribute('class', 'subBreed'); // Alla underraser skapas och läggs under respektive huvudras for (let i = 0; i < getSubBreeds.length; i++) { if (checkIfAnyChildNode === "") { let insurtSubBreeds = getSubBreeds[i]; let createdSubLiForUl = document.createElement('li'); createdSubLiForUl.setAttribute('class', 'subBreedIteam'); // Adderar blanksteg ( ' ' ) sist i regeln nedan för funktionen getRandomImgs och raden med ID = 3423 createdSubLiForUl.textContent = insurtSubBreeds.charAt(0).toUpperCase() + insurtSubBreeds.slice(1); createdSubUlForLi.appendChild(createdSubLiForUl); createdLiForUl.appendChild(createdSubUlForLi); } } } getRandomImgs(); startLiListen(); } function getRandomImgs () { let requestImgs = new XMLHttpRequest(); requestImgs.addEventListener('load', insurtRandomImgs); let urlStr = 'https://dog.ceo/api/breeds/image/random'; requestImgs.open('GET', urlStr); requestImgs.send(); } function insurtRandomImgs() { console.log(getPlaceforImgs); let getParsedRandomImgs = JSON.parse(this.responseText); let getParsedImgsOfAllBreed = getParsedRandomImgs['message']; getPlaceforImgs.setAttribute('src', getParsedImgsOfAllBreed); } function startLiListen() { let getLiElement = document.querySelectorAll('.dogBreedBox p, .subBreedIteam'); for (let i = 0; i < getLiElement.length; i++) { let getLiElementToListen = getLiElement[i]; getLiElementToListen.addEventListener('click', getDogBreedSpecificStrs); } } function getDogBreedSpecificStrs(e){ let targetLi = e.target; let getTargetStr = targetLi.textContent; // Skapar ett namn uppe i adressfältet som jag sedan kan använda för namnspecifica ändamål location.hash = getTargetStr; let getTargetBreedStrAddressbar = location.hash; getTargetBreedStrAddressbar = location.hash.substring(1); // Raderar # tecknet i strängen let targetBreedStr = getTargetBreedStrAddressbar.toLowerCase(); let getTargetSubBreedsHeadStr = targetLi.parentElement.textContent; console.log(getTargetSubBreedsHeadStr); let getTargetStrsInSubBreedToLength = getTargetStrsInSubBreed.split(' ').length; console.log(getTargetStrsInSubBreedToLength); //let getChildNodesOfTargetLi = targetLi.childNodes.length; //OBS mellanslag räknas som en textnode if (getTargetStrsInSubBreedToLength === 2 || getTargetStrsInSubBreedToLength === 4) { getDogBreedsStrPlace.textContent = "Bilder på " + getTargetBreedStrAddressbar; } else if (getTargetStrsInSubBreedToLength > 2) { let getHeadBreedOfTargetSubBreed = targetLi.parentElement.parentElement.childNodes[0].textContent; getDogBreedsStrPlace.textContent = "Bilder på " + getHeadBreedOfTargetSubBreed + " --> " + getTargetBreedStrAddressbar; } getBtnRefresh.removeEventListener('click', getRandomImgs); getTargetBreedStrs(targetBreedStr); } // Hämta random bilder baserat på vilken ras jag väljer function getTargetBreedStrs(targetBreedStr){ let requestImgs = new XMLHttpRequest(); requestImgs.addEventListener('load', getDogBreedSpecificImgs); let urlStr = 'https://dog.ceo/api/breed/' + targetBreedStr + '/images/random'; requestImgs.open('GET', urlStr); requestImgs.send(); } function getDogBreedSpecificImgs() { // let getParsedListOfAllBreed = JSON.parse(this.responseText); let getParsedImgsOfAllBreed = getParsedListOfAllBreed['message']; getPlaceforImgs.setAttribute('src', getParsedImgsOfAllBreed); }

Om det är tillåtet att länka till Githubb kan fixa det ?

Problem:
Jag har ett klick event kopplat till mina alla li där min fråga gäller denna typ av li med nästlat ul m.m. Se nedan:

<li class="dogBreedBox">
<p>Bulldog</p>
<ul class="subBreed">
<li class="subBreedIteam">Boston</li>
<li class="subBreedIteam">French</li>
</ul>
</li>

Jag vill i JS kunna plocka ut rätt p element enligt li elementet jag klickar på. Förutsatt att li elementet ligger i ett nästlat li!

Lätt det begripligt?

Mvh Fredrik

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S. 

Permalänk
Medlem

Gör en jsfiddle där du bara inkluderar ett minimal working example av ditt problem.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.