/ / remove :: after when viene visualizzato un solo elemento - jquery

rimuovere :: dopo quando viene visualizzato un solo elemento - jquery

Devo rimuovere il ::after quando solo uno div.portfolio-item È visualizzato. Il motivo è perché un'immagine è allegata a ciascuno degli oggetti ma quando c'è un solo oggetto è in conflitto con il piè di pagina. Sto pensando che se c'è solo una volta allora si dovrebbe aggiungere una classe chiamata one-item, in questo modo posso controllare il :: after via CSS.

Violino: http://jsfiddle.net/amesy/1ku221ds/

jQuery ...

function StringContainsAllItems(stringVal, items) {
if (items.length == 0 || items.length == null) {
return false;
}

for (var i = 0; i < items.length; i++) {
console.log("Item: " + items[i]);
if (stringVal.indexOf(items[i]) == -1) {
return false;
}
}

return true;
}

$(function () {
//initialize first item
$("div.portfolio-item:visible:first").addClass("first-item");

var $checkboxes = $("input[id^="type-"]");
$("input[type=checkbox]:checked").attr("checked", false);

$checkboxes.change(function () {
if ($("input[type=checkbox]:checked").length > 0) {

var selectorArray = [];

$checkboxes.filter(":checked").each(function () {
selectorArray.push($(this).attr("rel"));
console.log($(this).attr("rel"));
});

$("[data-category]").hide() // hide all rows
.filter(function () {
return StringContainsAllItems($(this).data("category"), selectorArray);
}).show(); // reduce set to matched and show
} else {
$("[data-category]").show();
}

$("div.portfolio-item").removeClass("first-item");

$("div.portfolio-item:visible:first").addClass("first-item");
});
});

Così ho aggiunto questa funzione che non funziona ma hai un'idea di cosa sto cercando di fare ...

$(function () {
var numItems = $("div.portfolio-item:visible").length;
if (numItems === 1) {
$("div.portfolio-item:visible").addClass("one-item");
}
});

risposte:

3 per risposta № 1

Se si desidera rimuovere un ::after pseudo-elemento quando c'è un solo figlio, puoi usare il :only-child pseudo-classe:

.portfolio-item:after {
content: "foo";
}
.portfolio-item:only-child:after {
content: none; /* or normal, unset, initial */
}

.portfolio-item:after {
content: "foo";
}
.portfolio-item:only-child:after {
content: none;
}
<div>
<div class="portfolio-item"></div>
</div>
<hr />
<div>
<div class="portfolio-item"></div>
<div class="portfolio-item"></div>
</div>


0 per risposta № 2

È stato risolto qui da https://stackoverflow.com/users/2048391/jyrkim

Rimuovi dal DOM e aggiungi nuovamente quando la casella di controllo è vera o falsa


0 per risposta № 3

Puoi testare se ce n'è solo uno:

if( $("div.portfolio-item").first()[0] === $("div.portfolio-item").last()[0] )

se falso, quindi utilizzare jQuery.append () anziché css :: dopo

$("div.portfolio-item").append("your content");

Controllalo:

var items = $("div.portfolio-item:visible");
if( items.first().get(0) !== items.last().get(0) ){
items.addClass("one-item");
}

Informazioni sul codice precedente:

se il primo NON è uguale all'ultimo, in altre parole: se NON c'è solo uno, quindi aggiungi la classe

Funziona bene