添加與jQuery一類第一和最後一個子

-3

$('.image-container img:first').addClass('active'); 
 
$('.image-container img:last').addClass('left');

.active { border: 1px solid red; } 
 
.left { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='image-container'> 
 
    <img src="/img.png" alt="xga-1"> 
 
    <br> 
 
    <img src="/img2.png" alt="xga-1"> 
 
</div>

當我添加類主動或動態離開，這也增加圖像之間的類標記爲<br>。我如何防止代碼做到這一點，只將類添加到image-container中的圖像？

來源

2017-08-16 John R

你確定嗎？請創建一個證據。目前你的代碼工作正常。 – gaetanoM

我把你的代碼放在代碼片段中。正如你可以看到它工作正常。沒有任何關於你的代碼可以應用br元素上的任何類。如果發生這種情況，它必定是由於你的代碼的另一個區域 –

是的，我看到的所有東西都是你想要的。另外，爲什麼你使用br標籤而不是簡單地使用CSS來將它們顯示爲塊元素？ – Snowmonkey

嘿，你可以使用「不」的功能在jQuery來做到這一點 http://api.jquery.com/not/

$('.image-container img:first').not("br").addClass('active'); 
$('.image-container img:last').not("br").addClass('left');

雖然這奇怪的是，這是發生在所有，但至少應該排除是否該位代碼是原因。

來源

2017-08-16 16:33:37

但在提供答案之前，爲什麼您不驗證用戶描述的問題沒有發生？ – quirimmo

我確實運行過這個代碼段，顯然它沒有發生，但我在其環境中看到的是OP。添加此代碼可以幫助排除這一點代碼問題。更可能是其他地方。 –

$('.image-container img').first().addClass('active'); 
 
    $('.image-container img').last().addClass('left');

.active { border: 1px solid red; } 
 
    .left { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class='image-container'> 
 
     <img src="/img.png" alt="xga-1"> 
 
     <br> 
 
     <img src="/img2.png" alt="xga-1"> 
 
    </div>

來源

2017-08-16 16:37:28

但在提供答案之前，爲什麼您不驗證用戶描述的問題沒有發生？ – quirimmo

添加與jQuery一類第一和最後一個子

回答

相關問題