게시물 a태그에 text가 없을 때 if문 적용안됨
본문
질문을 통해 게시물 목록을 사진처럼 만들었습니다.
글이 없을 때 border을 안나오도록 하려고 처음엔 a태그의 href 글자수를 확인하여 글자수가 0 일때 border가 안보이도록 하였는데 적용이 안됐습니다.
그래서 기존 css에 border을 없애고 a의 text에 글자수가 0이 아닐때 border이 나오도록 적용했는데 보시다시피 text가 없음에도 border가 뜹니다..
저는 글이 없을 땐 border-bottom이 안나오도록 하고싶은데 계속 코드를 바꿔도 적용이 안되서 어렵습니다..
혹시 제가 고쳐야할 부분을 알려주시거나 새 해결방법을 알려주시면 정말로 감사하겠습니다!
http://test10.dothome.co.kr/g5/bbs/board.php?bo_table=news
여기는 해당 사이트입니다.
아래는 제가 짠 코드입니다.
<script>
jQuery(function(x) {
let bo_a = $(".td_news a");
let a_text = bo_a.prop("text");
let a_arr = a_text.length;
console.log(a_arr);
if (a_arr != 0) {
$(".td_news").css("border-bottom", "1px solid #c1c1c1");
}
});
</script>
답변 4
$('.bo_h2').each(function() { if($(this).children('a').text().trim().length == 0){ $(this).parent().css("border-bottom", "0px"); } })
더보기 클릭할떄마다 위 코드 이벤트 발생시켜주면 됩니다.
정말 깔끔한 코드네요 ㅜㅜ 저는 왜 this를 사용할 생각을 못했을까요..다시 배워갑니다!! 감사합니다!
스크립트 대신 css 처리방법 입니다.
- 관련 스트립트 삭제
- /g5/theme/joanlabor/skin/board/news/style.css
...
.news_left .td_news {margin: 50px 40px 0 0;}
.news_left .td_news:first-child {margin-top: 0;}
/* ------------------------------- 추가 ------------------------------- */
.td_news { border-bottom: 1px solid rgb(193, 193, 193); }
.td_news:has(.bo_h2 a[href=""]) { border-bottom: 0 none; }
/* ------------------------------- 추가 ------------------------------- */
.bo_img {
overflow: hidden;
max-width: 556px;
height: 822px;
}
...
스크립트말고 css로도 처리할 수 있군요! 이렇게 또 배워갑니다 감사합니다!!!!
Php에서 하시면 더 간단할 텐데요.
알려주셔서 감사합니다!
두분 다 다르지만 좋은 코드를 알려주셔서 채택을 어떻게 할지 정말 고민했습니다 ㅜㅜ 그래서 먼저 적으신분께 드렸어요!! 두 분 다 정말 멋진 코드고 멋진 코드 알려주셔서 감사합니다!
