Pracuję z produktem koszyka, który wyrzuca raczej staroświecki HTML. Ponieważ wózek generowany jest dynamicznie generowany przez Commerce PDG, nie mam kontroli nad strukturą znacznika HTML.

Oto próbka:

<p class='ups_address_suggest'>
    <input type="radio" name="addrvalselect" value="3" onclick="setaddr2();">DULUTH, MN &nbsp;&nbsp;55810 
    <input type="radio" name="addrvalselect" value="4" onclick="setaddr3();">DULUTH, MN &nbsp;&nbsp;55811 
    <input type="radio" name="addrvalselect" value="5" onclick="setaddr4();">DULUTH, MN &nbsp;&nbsp;55812 
    <input type="radio" name="addrvalselect" value="6" onclick="setaddr5();">HERMANTOWN, MN &nbsp;&nbsp;55810 
    <input type="radio" name="addrvalselect" value="7" onclick="setaddr6();">HERMANTOWN, MN &nbsp;&nbsp;55811 
    <input type="radio" name="addrvalselect" value="8" onclick="setaddr7();">BOWDON JUNCTION, GA &nbsp;&nbsp;30109 
</p>

Jak pokazano powyżej, wyświetla przyciski radiowe z tekstem obok nich, co nie jest w elemencie etykiet.

Próbuję tego stylować, więc wygląda przyzwoicie. Do tej pory próbowałem zastosować CSS do elementów wejściowych (wyświetlanie: blok, pływak: w lewo itp.) Ale to pozostawia tekst w nieparzystej miejsc, takich jak kolejna linia lub wszystkie spiętrzone razem, gdy przyciski pływają w lewo.

Korzystając z jQuery, nie byłem w stanie do tej pory, aby uzyskać tekst i wejście jako jednostkę, aby owinąć je na etykietę lub {x0}} lub cokolwiek.

Oto jak wygląda bieżącą wyjście w przeglądarce: przyciski bezstopniowe

Wszelkie sugestie dotyczące sposobu JavaScript i / lub Jquery, aby to naprawić? Lub sposób, aby przyciski sformatowały starannie obok etykiet tekstowych za pomocą tylko CSS.

5
JAL 26 listopad 2013, 01:34

3 odpowiedzi

Najlepsza odpowiedź

Działa to dla mnie w konsoli (Chrome):

JQuery:

$('p.ups_address_suggest input').each(function (i, elem) {
    var self = $(elem),                             // cache DOM lookup
        text = $(elem.nextSibling).detach(),        // remove text and jQuerify
        label = $('<label />').text(text.text());   // add to a new label
    label.insertAfter(self);                        // insert label into DOM
});

CSS:

p.ups_address_suggest input, p.ups_address_suggest label {float: left;}
p.ups_address_suggest input {clear: left;}

Oto skrzypce: http://jsfiddle.net/xb42s/

4
pete 25 listopad 2013, 21:54

Oto rozwiązanie, które wymyśliłem. To nie jest idealne, ale działa dla tego przypadku:

$('p.ups_address_suggest').html(
    $('p.ups_address_suggest').html().replace(/(\<input.*?\d{5})/g,'<label>$1</label>')
);

Regex wyszukuje z <input.. do 5 cyfr i zawija to na etykiecie. Które powinno dać Ci więcej opcji stylizacji.

http://jsfiddle.net/nxfbn/

1
Andy 25 listopad 2013, 21:50

Jeśli chcesz, aby były wbudowane, umieść każdą parę wejścia / tekstu w rozpiętości, w przeciwnym razie w p (lub użyj Br po każdym wejściu) i powinien wyglądać bardziej schludnie.

0
Kourkis 25 listopad 2013, 21:38