[Résolu] Supprimer/Masquer une Option dans un Select (Responsive)

Salut tout le monde,

Je cherche à supprimer/masquer une option dans un select mais je n'y parviens pas malgré différentes tentatives.

Pour résumer à la base il s'agit d'une simple Liste qui se transforme en Select lorsque le site est consulté via un mobile. Au centre de cette liste, j'ai inséré le logo du site dans un LI afin de le centrer par rapport à la navigation. Mon soucis est qu'une fois sur mobile, le LI contenant l'image du logo créé un LI vide (normal) ... mais comment le supprimer/masquer uniquement dans ce cas de figure ?

Voici mon menu de base :

<nav>
	<ul class="menu">
		<li><a href="#">Page 1</a></li>
		<li><a href="#">Page 2</a>
			<ul class="sub-menu">
				<li><a href="#">Page 2.1</a></li>
				<li><a href="#">Page 2.2</a></li>
			</ul>
		</li>
		<li><a href="#">Page 3</a>
			<ul class="sub-menu">
				<li><a href="#">Page 3.1</a></li>
				<li><a href="#">Page 3.2</a></li>
			</ul>
		</li>
		<li><a href="index.html" class="logo"><img src="img/logo.png" width="242" height="88" alt=""></a></li>
		<li><a href="#">Page 4</a>
			<ul class="sub-menu">
				<li><a href="#">Page 4.1</a></li>
				<li><a href="#">Page 4.2</a></li>
			</ul>
		</li>
		<li><a href="#">Page 5</a></li>
	</ul>
</nav>

Et le code JS transformant la nav en Select :

<script type="text/javascript">
$(document).ready(function($){
var $menu_select = $('<select id="navigation" />');
$menu_select.appendTo("nav");
$("nav ul li a").each(function(){
var menu_url = $(this).attr("href");
var menu_text = $(this).text();
if ($(this).parents("li").length == 2) { menu_text = '- ' + menu_text; }
$('<option />', {"value": menu_url, "text": menu_text}).appendTo($menu_select)
})
field_id = "nav select";
$(field_id).change(function()
{
value = $(this).attr('value');
window.location = value;	
});
})
</script>

Merci d'avance pour votre aide.

Salut,

Ca a l'air d'être du jQuery, donc je tenterais ça:

// ...
$("nav ul li a").each(function(){
    var $this = $(this); // Pour éviter d'appeler plusieurs fois $()
    
    // On ajoute l'option que si le lien ne contient pas d'image
    if($this.find("img").length == 0){
        // TODO: le reste de ton code (en utilisant $this pour optimiser)

    }
});
// ...

Mais peut-être que j'ai mal compris ce que tu voulais faire

jiber2fr a écrit :
Salut,

Ca a l'air d'être du jQuery, donc je tenterais ça:

// ...
$("nav ul li a").each(function(){
    var $this = $(this); // Pour éviter d'appeler plusieurs fois $()
    
    // On ajoute l'option que si le lien ne contient pas d'image
    if($this.find("img").length == 0){
        // TODO: le reste de ton code (en utilisant $this pour optimiser)

    }
});
// ...

Mais peut-être que j'ai mal compris ce que tu voulais faire

Merci ! c'est exactement ce que je cherchais à faire

$(document).ready(function($){
var $menu_select = $('<select id="navigation" />');
$menu_select.appendTo("nav");
$("nav ul li a").each(function(){
var $this = $(this); // Pour éviter d'appeler plusieurs fois $()
// On ajoute l'option que si le lien ne contient pas d'image
if($this.find("img").length == 0){
// TODO: le reste de ton code (en utilisant $this pour optimiser)
var menu_url = $(this).attr("href");
var menu_text = $(this).text();
if ($(this).parents("li").length == 2) { menu_text = '- ' + menu_text; }
$('<option />', {"value": menu_url, "text": menu_text}).appendTo($menu_select)
}
field_id = "nav select";
$(field_id).change(function()
{
value = $(this).attr('value');
window.location = value;	
});
});
});

Modifié par yank (10 Jan 2013 - 14:59)

Voilà le code Js optimisé

$(function($){
var combo = $('<select />').appendTo("nav");
$("nav ul li a").each(function(){
if($(this).find("img").length == 0){
$('<option />', {"value": $(this).attr("href"), "text": '- ' + $(this).text()}).appendTo(combo);
}
$("nav select").change(function() {
window.location = $(this).attr('value');
});
});
});

Modifié par yank (15 Jan 2013 - 10:15)