[JavaScript]Jak znaleźć element a potem jego parent? Opcje

[phpamator]

Pytanie do specjalistów od jQuery.
Chciałbym posegregować elementy według pewnej kolejności którą że tak powiem mam w tablicy.
Wybierając kolejno z tablicy identyfikator chę wyszukać element posiadający takie id bądź nazwę i przenieść we wskazane miejsce.
Brzmi może dzwnie ale ... cóż tak chciałbym zrobić.
Samo znajdowanie elementu to nie problem, problem jak teraz wskazać "rodzica" tego elementu i go wyciągnąć wraz z całą zawartością (.html()).

Przykład:

[HTML] pobierz, plaintext 
<dl class="filter-block">
	<!-- blok do przeniesienia pogrubiony o ile zgadza się string .text() ze span class="filter-title" -->
	<div class="layered-navigation option-block">
		<div childblock_id="manufacturer" class="odd option-block-head toggle-block" style="cursor: pointer;">
			<!-- element wyszukiwany w/g klasy 'filter-title' .text() -->
			<span class="filter-title">Brands</span>
			<span class="open-close">+</span>
		</div>
	</div>
 
	<div class="layered-navigation option-block">
		<div childblock_id="price" class="odd option-block-head toggle-block" style="cursor: pointer;">
			<span class="filter-title">Price</span>
			<span class="open-close">+</span>
		</div>
	</div>
</dl>
[HTML] pobierz, plaintext 

czyli jeśli w tablicy znajduje się określony string wybierz TEN element/blok $('div .layered-navigation,.option-block').html()
tylko nie wiem jak zrobić z niego 'this' jeśli znajduje się w nim lub jego dziecku wskazany string.
mam nadzieję, że się jasno wyraziłem

W międzyczasie znalazłem to: https://api.jquery.com/child-selector/ ...
ale nie do końca czaję ...

pozdrawiam
amator

Ten post edytował phpamator 1.09.2017, 21:16:39

[trueblue]

Chcesz wybrać elementy, których dzieci mają określone id lub nazwę, czy elementy, które posiadają w innerHTML jakiś string?

[phpamator]

Dziecko dziecka zawiera tekst i po tym tekście rozpoznaję, następnie muszę zebrać innerHtml z parenta tego dziecka dziecka
czyli tak:

[HTML] pobierz, plaintext 
<div name="rodzic">
        <div name="pierwsze_dziecko">
                <div>
                <span name="drugie_dziecko">Moj string</span>
        </div>
</div>
[HTML] pobierz, plaintext 

czyli znajduje "mój string" i muszę zdefiniować to co jest jego rodzicem i dopiero zebrać cały html() rodzica i przenieść.

ooo ale jeśli mogę wybrać rodzica który ma dziecko z określonym stringiem to chyba też będzie ok ?


Ten post edytował phpamator 1.09.2017, 21:35:30

[trueblue]

Skoro dzieci Ciebie nie interesują, to sprawdzałbym każdego rodzica pod względem zawartości stringu w innerText. Wtedy nie musisz się zagłębiać w dzieci.
Chyba, że tekst ma być określonym dziecku/tagu.

[phpamator]

Nie wiem jak "sprawdzić innerHtml rodzica pod względem zawartości stringu" ...


Ten post edytował phpamator 1.09.2017, 23:00:04

[trueblue]

Nie rodzica, innerText rodzica.

[phpamator]

wymyśliłem tak:

[JAVASCRIPT] pobierz, plaintext 
var blockName = newOrder[i][1];// newOrder[i][1] to oczywiście szukany string pobrany z tablicy
	var block = jQuery("span.filter-title:contains(blockName)").parent().parent().html();
// ale nie bardzo chce mi podstawić szukany string
[JAVASCRIPT] pobierz, plaintext 

co źle zrobiłem ?
http://jsfiddle.net/SayjQ/59/ to mi pomogło trochę ...

Ten post edytował phpamator 1.09.2017, 23:35:12

[trueblue]

Kod

span.filter-title:contains('"+blockName+"')

[phpamator]

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahhhhhhhhhhhhhaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaa
hahahah
no to ci powiem, że nic z tego, nie działa
Za to działa tak:

[HTML] pobierz, plaintext 
var block = jQuery('span.filter-title:contains("'+blockName+'")').parent().parent().html();
[HTML] pobierz, plaintext 

Ten post edytował phpamator 2.09.2017, 19:54:22

[trueblue]

A ja Ci powiem, że działa zarówno tak jak podałeś, jak i:

[HTML] pobierz, plaintext 
var block = jQuery("span.filter-title:contains('"+blockName+"')").parent().parent().html();
[HTML] pobierz, plaintext 

ale Ty pewnie pomieszałeś kolejność cudzysłowów.

A skoro chcesz pobrać od razu rodzica, to tak będzie czytelniej:

[HTML] pobierz, plaintext 
var block = jQuery("div.layered-navigation.option-block span.filter-title:contains('"+blockName+"')").html();
[HTML] pobierz, plaintext 

[Pyton_000]

albo `.closest('div.layered-navigation.option-block')`

[phpamator]

Zdecydowanie nie działało ale nie będę się sprzeczał, nie uwzględniłeś zewnętrznych '' i napisałeś span.filter-title:contains('"+blockName+"')
dlatego poniższy kod robił NIC
var block = jQuery('span.filter-title:contains('"+blockName+"')').parent().parent().html();
aaaale po zmianie owszem, działa.

Bardziej podoba mi się jednak ta druga forma

chociaż wersja a'la python_000 też jest ok

Dzięki panowie

to jednak było prostsze niż początkowo myślałem, przy okazji nauczyłem się co nieco jak można zmyślnie łączyć niektóre parametry, żeby wyszukać interesujący element

[trueblue]

Nie dodałem również nawiasów, jQuery, itd. Bez przesady. Podałem Ci fragment, w którym jest błąd.

[phpamator]

Działa, działa ale ..... coś nie do końca jak oczekiwałem.
Popatrzcie i podpowiedzcie proszę co źle zrobiłem albo jaka jest szansa, że to wogóle będzie robiło to o czym mówiłem.

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function(){
	//Variables & arrays
	var i = 0;
	var block ='';
	var blockName = '';
	var newOrder = [[1,'Brands'],[2,'Price'],[3,'Number of Cameras Supported'],[4,'Screen Size'],[5,'Split Screen'],[6,'Touch Screen'],[7,'Pan & Tilt'],[8,'Zoom'],[9,'Room Temp'],[10,'Lullabies'],[11,'Wi-Fi'],[12,'Nightvision'],[13,'Light Projector'],[14,'Two-Way Talk'],[15,'Temperature Display'],[16,'Recordable'],[17,'Outdoor Range (Metres)']];
	// each leci po kolei wszystkie elementy tablicy i wyszukuje w/g nich na stronie, jak znajdzie przenosi w inne miejsce
	// czy to tak działa czy coś mi się wydaje, że to tak działa ?
	// bo coś mi się wydaje, że nawet po przeniesieniu może znajdowaćjuż przeniesione i robić bałagan.
	// dlatego wyszukiwanie musi być tylko w określonym rodzicu ..... ale może mi się tylko wydaje :)
	// po przeładowaniu powinien cały proces wykonać od początku .... prawda ?
	jQuery.each(newOrder,function(){
		blockName = newOrder[i][1];
		block = jQuery('span.filter-title:contains("'+blockName+'")').parent().parent().html();
		if (block) {
			console.log(blockName);
			jQuery('span.filter-title:contains("'+blockName+'")').parent().parent().remove();
			jQuery('#narrow-by-list').prepend(block);
			i++;
		}else{
			console.log(blockName+'  not found');
		}
	})
})
[JAVASCRIPT] pobierz, plaintext 

Może przykład jest beznadziejnie prosty może wręcz banalny ale jeszcze nie czaję tego.

Ten post edytował phpamator 4.09.2017, 14:29:38

[trueblue]

Uprościłbym pętlę skoro korzystasz z each.

[HTML] pobierz, plaintext 
//bez deklaracji i wyżej
 jQuery.each(newOrder, function(i, blockName){
//nazwa bloku jest w blockName[1]
//bez inkrementacji i
[HTML] pobierz, plaintext 

Przecież jeśli przenosisz element w innej miejsce, to i tak nie szukasz go w pętli ponownie. Jeśli przeniosłeś Brands, to w kolejnej iteracji szukasz Price.

Jak się objawia ta usterka?

[Pyton_000]

i `block.lenght > 0` bo zdaje się że jQ i tak zwróci obiekt ale bez rezultatów.

[phpamator]

Uprościłbym pętlę skoro korzystasz z each.

[HTML] pobierz, plaintext 
//bez deklaracji i wyżej
 jQuery.each(newOrder, function(i, blockName){
//nazwa bloku jest w blockName[1]
//bez inkrementacji i
[HTML] pobierz, plaintext 

Przecież jeśli przenosisz element w innej miejsce, to i tak nie szukasz go w pętli ponownie. Jeśli przeniosłeś Brands, to w kolejnej iteracji szukasz Price.

Jak się objawia ta usterka?

Tak teoretycznie miało to działać ale ... z jakiegoś powodu podczas wykonywania pętli (wkleiłem tam console.log() żeby widzieć ile z listy przeszło a ile nie przeszło bo może tak być lista/tablica nie zawiera wszystkich tylko niektóre nazwy) jakby przestaje kolejno dodawać/przenosić elementy, działa dobrze praktycznie tylko dla pierwszych 2 czyli Brands i Prices.
Powinienem widzieć też jakie zostały pominięte wraz z nazwami a skrypt pokazuje mi jedną tylko nazwę z ilością powtórzeń.

Czyli co, usunąć indexy, zostawić tylko same nazwy w tablicy mówisz ?

[trueblue]

Indeksy swoją drogą. Wtedy blockName jest dostępny bezpośrednio.
Wprowadziłeś warunek, o którym pisał Pyton_000?

[phpamator]

Zmodyfikowałem i faktycznie, lepiej działa i widzę że prawidłowo teraz sortuje a jeśli niema na liście zostawia.

Tak dodałem warunek "a'la python_ooo" ale z nim coś nie halo.

Ten post edytował phpamator 4.09.2017, 15:20:22

[trueblue]

A nie prościej by było napisać, co nadal nie działa?

[phpamator]

No może
Po dodaniu block.lenght>0
skrypt przestaje działać po pierwszych 2 nazwach

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function(){
	//Variables & arrays
	var i = 0;
 
	var block ='';
 
	var blockName = '';
 
	var newOrder = ["Brands","Price","Number of Cameras Supported","Screen Size","Split Screen","Touch Screen","Pan & Tilt","Zoom","Room Temp","Lullabies","Wi-Fi","Nightvision","Light Projector","Two-Way Talk","Temperature Display","Recordable"];
 
	//var newOrder = [[1,'Brands'],[2,'Price'],[3,'Number of Cameras Supported'],[4,'Screen Size'],[5,'Split Screen'],[6,'Touch Screen'],[7,'Pan & Tilt'],[8,'Zoom'],[9,'Room Temp'],[10,'Lullabies'],[11,'Wi-Fi'],[12,'Nightvision'],[13,'Light Projector'],[14,'Two-Way Talk'],[15,'Temperature Display'],[16,'Recordable'],[17,'Outdoor Range (Metres)']];
	//Functions & 
	jQuery.each(newOrder,function(i,blockName){
 
		block = jQuery('span.filter-title:contains("'+blockName+'")').parent().parent().html();
 
		if (block.length >0){
 
			console.log(blockName);
 
			jQuery('span.filter-title:contains("'+blockName+'")').parent().parent().remove();
 
			jQuery('#pafka').append(block);
 
		}else{
 
			console.log(blockName+ '  not found');
 
		}
 
	})
 
})
[JAVASCRIPT] pobierz, plaintext 

Co znowu skopałem ?

Ten post edytował phpamator 4.09.2017, 15:25:01

[trueblue]

[HTML] pobierz, plaintext 
block = jQuery('span.filter-title:contains("'+blockName+'")');
 if (block.length >0){
  var blockParent=block.parent().parent();
  var htmlParent=blockParent.html();
  blockParent().remove();
  jQuery('#pafka').append(htmlParent);
[HTML] pobierz, plaintext 

Nie musisz dwukrotnie szukać span zawierającego ten tekst, bo przed warunkiem go znalazłeś.

[phpamator]

Aaaaaa rozumiem ..... jakby trochę

przy okazji upraszcza się kod

blockParent(). ..... nie jest funkcją

i kiedy block.lenght>0 pomija wszystkie i wywala nie znaleziono


Ten post edytował phpamator 4.09.2017, 15:43:34

[Pyton_000]

co to znaczy że przestaje działać. Co wywala konsola?

[phpamator]

No własnie wywala błąd "blockParent()" nie jest funkcją więc wywaliłem nawiasy i śmiga ale .lenght >0 powoduje, że nie widzi nazw.
i tak wugląda w konsoli


Ten post edytował phpamator 4.09.2017, 15:47:58

[Pyton_000]

daj przed ifem

console.log(blockName, block.length);

I pokaż przykładowy cały kod html gdzie są te wartości. Może HTML też jest skopany?

[trueblue]

Zgadza się:

[HTML] pobierz, plaintext 
blockParent.remove()
[HTML] pobierz, plaintext 

A co wyświetla console.log(block) przed ifem?

[phpamator]

teraz jest ok, wyświetla nazwe i 1 albo jeśli nie znalazł nazwe i not found

a z długością ... literówka chyba bo nic innego nie mogło być


Może by tak zamiast przenosić poprostu posortować według listy w arrayu ?



Ten post edytował phpamator 4.09.2017, 16:07:12

[Pyton_000]

to co działa czy nie działa? Pokaż ostatecznie kod jaki masz.

[phpamator]

Działa,
kod wygląda tak:

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function(){
	//Variables & arrays
	var i = 0;
 
	var block ='';
 
	var blockName = '';
 
	var newOrder = ["Price","Brands","Number of Cameras Supported","Screen Size","Split Screen","Touch Screen","Pan & Tilt","Zoom","Room Temp","Lullabies","Wi-Fi","Nightvision","Light Projector","Two-Way Talk","Temperature Display","Recordable"];
 
	//var newOrder = [[1,'Brands'],[2,'Price'],[3,'Number of Cameras Supported'],[4,'Screen Size'],[5,'Split Screen'],[6,'Touch Screen'],[7,'Pan & Tilt'],[8,'Zoom'],[9,'Room Temp'],[10,'Lullabies'],[11,'Wi-Fi'],[12,'Nightvision'],[13,'Light Projector'],[14,'Two-Way Talk'],[15,'Temperature Display'],[16,'Recordable'],[17,'Outdoor Range (Metres)']];
	//Functions & 
	jQuery.each(newOrder,function(i,blockName){
 
		block = jQuery('span.filter-title:contains("'+blockName+'")');
 
		console.log(blockName, block.length);
 
		if (block.length>0){
 
			var blockParent=block.parent().parent();
 
			var htmlParent=blockParent.html();
 
			blockParent.remove();
 
			console.log(blockName+ '  moved')
 
			jQuery('#pafka').append(htmlParent);
 
		}else{
 
			console.log(blockName+ '  not found');
 
		}
 
	})
 
})
[JAVASCRIPT] pobierz, plaintext